JS有两种获取元素属性的方式:
1)元素.属性名
var div1 = document.getElementById('div1');
div1.style.width = '100px';
2)元素[‘属性名’]
var div1 = document.getElementById('div1');
div1.style['width'] = '100px';
两种方式的区别:
1)第一组种方式简单、好用。
2)第二组方式可以解决一些第一种方式解决不了的问题,例如通过参数传递属性名。
在这里给大家举个例子,如下要实现以下功能,通过点击input按钮实现对应功能。
傻瓜代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Elemple</title>
<style>
#div1 {
width: 100px;
height: 100px;
margin-top: 20px;
background-color: #ccc;
}
</style>
</head>
<body>
<input type="button" value="变高" onclick="changeHeigth()">
<input type="button" value="变宽" onclick="changeWidth()">
<input type="button" value="变粉" onclick="changeBGC()">
<div id="div1"></div>
<script>
function changeHeigth() {
var elem = document.getElementById('div1');
elem.style.height = '200px';
}
function changeWidth() {
var elem = document.getElementById('div1');
elem.style.width = '200px';
}
function changeBGC() {
var elem = document.getElementById('div1');
// 注意,JS里不能用background-color,要使用backgroundColor
elem.style.backgroundColor = 'pink';
}
</script>
</body>
</html>
可以看出3个函数高度相似,只有需要改的属性和属性值不同。因此我们应该把3个函数变成1个函数,然后使用参数传递属性名和属性值。若我们使用第一种获取方式,如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Elemple</title>
<style>
#div1 {
width: 100px;
height: 100px;
margin-top: 20px;
background-color: #ccc;
}
</style>
</head>
<body>
<input type="button" value="变高" onclick="change('height','200px')">
<input type="button" value="变宽" onclick="change('width','200px')">
<input type="button" value="变粉" onclick="change('backgroundColor','pink')">
<div id="div1"></div>
<script>
function change(name,value) {
var elem = document.getElementById('div1');
elem.style.name = value; //第一种方式
}
</script>
</body>
</html>
会发现这样是无法运行出正确结果的。因为编译器并不会把elem.style.name里的name当作传入的参数name,会以为这是一个名为‘name’的属性,而导致错误。因此这里是需要使用第二组获取属性的方式,如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Elemple</title>
<style>
#div1 {
width: 100px;
height: 100px;
margin-top: 20px;
background-color: #ccc;
}
</style>
</head>
<body>
<input type="button" value="变高" onclick="change('height','200px')">
<input type="button" value="变宽" onclick="change('width','200px')">
<input type="button" value="变粉" onclick="change('backgroundColor','pink')">
<div id="div1"></div>
<script>
function change(name,value) {
var elem = document.getElementById('div1');
elem.style[name] = value; //第二种方式
}
</script>
</body>
</html>
这样会发现点击input按钮可以正确改变元素属性值了。
总结:
第一种方式非常简单方便,若没有特殊要求使用第一种方式是非常合适的选择。但是,如果有类似上面例子的用法,则必须使用第二种方式。
所以属性都是可以用第二种方式调用的,例如
var elem = document['getElementById']('div1');