undefined

js属性操作

发表于 | 分类于 ，
字数统计: 1,725 | 阅读时长 ≈ 9

HTML的属性操作：读、写

属性：属性名+属性值。

属性的读操作

读操作：获取、找到。元素.属性名 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
		
<head>
		    <meta charset="utf-8">
		    <title></title>
		    <script type="text/javascript">
		    window.onload = function() {
		        var oBtn = document.getElementById('btn1');
		        var oText = document.getElementById('text1');
		        var oSelect = document.getElementById('select1');
		
		        oBtn.onclick = function() {
		            alert(oText.value + '在' + oSelect.value);
		        }
		
		    }
		    </script>
		</head>
		
		<body>
		    <input type="text" id="text1" />
		    <select id="select1">
		        <option value="北京">北京</option>
		        <option value="上海">上海</option>
		        <option value="杭州">杭州</option>
		    </select>
		    <input type="button" id="btn1" value="按钮" />
		</body>
		
		</html>

属性的写操作

(添加)替换、修改。元素.属性名=新的值。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
    window.onload = function() {
        var oBtn = document.getElementById('btn1');
        var oText = document.getElementById('text1');
        var oSelect = document.getElementById('select1');

        oBtn.onclick = function() {
            //oBtn.value='button';
            //oText.value='按钮';
            oText.value=oSelect.value;

        }

    }
    </script>
</head>

<body>
    <input type="text" id="text1" />
    <select id="select1">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="杭州">杭州</option>
    </select>
    <input type="button" id="btn1" value="按钮" />
</body>

</html>

读写操作结合的例子

在文本框中输入图片地址，点击按钮切换图片。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>
    window.onload = function() {
        var oBtn = document.getElementById('btn1');
        var oText = document.getElementById('text1');
        var oImg = document.getElementById('img1');

        oBtn.onclick = function() {
            oImg.src = oText.value;
        };
    };
    </script>
</head>

<body>
    <input id="text1" type="text" />
    <input id="btn1" type="button" value="按钮" />
    <p id="p1">这是一些文字</p>
    <img id="img1" src="img/1.jpg" width="200" />
</body>

</html>

innerHTML

元素.innerHTML:可以读取元素内的所有HTML代码。元素.innerHTML=新的值：修改或者替换元素内的所有HTML内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>
    window.onload = function() {
        var oBtn = document.getElementById('btn1');
        var oText = document.getElementById('text1');
        var oP = document.getElementById('p1');

        oBtn.onclick = function() {
            // oImg.src = oText.value;
            // alert( oP.innerHTML );
            oP.innerHTML = oText.value;
        };
    };
    </script>
</head>

<body>
    <input id="text1" type="text" />
    <input id="btn1" type="button" value="按钮" />
    <p id="p1">这是一些文字</p>
</body>

</html>

例子:属性读写操作配合innerHTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 { width:240px; height:200px; border:1px solid #333; background:#f1f1f1; padding:10px; }
</style>
<script>
window.onload = function (){
	var oDiv = document.getElementById('div1');
	var oStrong = document.getElementById('strong1');
	var oText = document.getElementById('text1');
	var oBtn = document.getElementById('btn1');
	
	oBtn.onclick = function (){
		// 原来的内容，你得给我留着，然后再加上新内容
		// a = a + b
		// a += b
		
		// 添加：+=
		// oDiv.innerHTML = oDiv.innerHTML + oText.value + '<br />';
		oDiv.innerHTML += oStrong.innerHTML + oText.value + '<br />';
		oText.value = '';
	};
};
</script>
</head>

<body>

<div id="div1"></div>
<strong id="strong1">张三：</strong>
<input id="text1" type="text" />
<input id="btn1" type="button" value="提交" />

</body>
</html>

属性操作注意事项

JS中不允许出现“-”，都是去掉“-”，后面的单词的首字母大写。

如：font-size fontSize
padding-top paddingTop
margin-left marginLeft

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>
    window.onload = function() {
        var oBtn1 = document.getElementById('btn1');
        var oBtn2 = document.getElementById('btn2');
        var oP = document.getElementById('p1');
        var num = 14;

        oBtn1.onclick = function() {
            num -= 2;
            oP.style.fontSize = num + 'px';		      
        };
        oBtn2.onclick = function() {		          
            num += 2;	
            oP.style.fontSize = num + 'px';
        };
    };
    </script>
</head>

<body>
    <input id="btn1" type="button" value="-" />
    <input id="btn2" type="button" value="+" />
    <p id="p1" style="font-size:16px;">10月28日晚，中央纪委监察部官网发布消息，贵州省委常委、遵义市委书记廖少华因涉嫌严重违纪违法接受组织调查。3天后中组部宣布对其免职。廖成为十八大后中纪委一连串"打虎"行动中第十一位落马的副省部级以上高官。</p>
</body>

</html>

js中的class作为保留字，不能用，样式名用className

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>
    window.onload = function() {
        var oBtn1 = document.getElementById('btn1');
        var oBtn2 = document.getElementById('btn2');
        var oBtn3 = document.getElementById('btn3');
        var oBtn4 = document.getElementById('btn4');
        var oP = document.getElementById('p1');
        var num = 14;

        oBtn1.onclick = function() {
            num -= 2;
            oP.style.fontSize = num + 'px';
        };
        oBtn2.onclick = function() {
            num += 2;
            oP.style.fontSize = num + 'px';
        };

        oBtn3.onclick = function() {
            oP.className = 'red';
        };
        oBtn4.onclick = function() {
            oP.className = 'yellow';
        };
    };
    </script>
    <style>
    .red {
        width: 400px;
        border: 10px solid #333;
        background: red;
        padding: 20px;
        color: yellow;
    }	
    .yellow {
        width: 500px;
        border: 5px solid #333;
        background: yellow;
        padding: 10px;
        color: red;
    }
    </style>
</head>

<body>
    <input id="btn1" type="button" value="-" />
    <input id="btn2" type="button" value="+" />
    <input id="btn3" type="button" value="红" />
    <input id="btn4" type="button" value="黄" />
    <p id="p1" style="font-size:16px;">10月28日晚，中央纪委监察部官网发布消息，贵州省委常委、遵义市委书记廖少华因涉嫌严重违纪违法接受组织调查。3天后中组部宣布对其免职。廖成为十八大后中纪委一连串"打虎"行动中第十一位落马的副省部级以上高官。</p>
</body>

</html>

不能作为判断条件的有:

1、所有的相对路径地址:img src href
2、颜色值：color：red #f00 rgb(100,0,0)
3、innerHTML不能拿来做判断

js修改input的type(ie6/7/8无效)

点击按钮变成复选框的例子：

1
2
3
4
5
6
7
<input id="inp1" type="button"/>
<script>
var olp=document.getElementById('inp1');
olnp.onclick=function(){
  olnp.type='checkbox';  //注意：这里在ie6/7/8会报错！！！
}
</script>

如果要做上面那个效果，还要兼容ie6/7/8，可以这样巧妙地回避：点击按钮，让按钮隐藏起来，checkbox本来是隐藏的，点击按钮之后让他显示出来。

浮动

想要一个元素浮动，在IE下用styleFloat,非IE下用cssFloat,简而言之就是下面这样：同时写两句 

1
2
 		oDiv.style.styleFloat='left';    //兼容IE浏览器
oDiv.style.cssFloat='left';      //兼容非IE浏览器下

还可以采用下面的方法：通过改class，来修改浮动。 

1
2
.left{float:left;}
.right{float:right;}

点后面的值无法修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <script type="text/javascript">
    window.onload = function() {
        var oAttr = document.getElementById('attr');
        var oVal = document.getElementById('val');
        var oBtn = document.getElementById('btn1');
        var oDiv = document.getElementById('div1');

        oBtn.onclick = function() {           
            oDiv.style[oAttr.value] = oVal.value; //中括号里面的值可以随便改
            //js中允许把点换成[]
        }

    }
    </script>
    请输入属性名称：
    <input type="text" id="attr" />
    <br/> 请输入属性值：
    <input type="text" id="val" />
    <input type="button" value="确定" id="btn1" />
    <div id="div1"></div>
</body>

</html>
觉得本站不错，请作者吃根辣条
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多