Javascript中获取元素属性的两种方式_js获取元素指定属性值的方法

作者：知新_RL | 2024-02-19 07:24:16

踩

js获取元素指定属性值的方法

JS有两种获取元素属性的方式：
1）元素.属性名

var div1 = document.getElementById('div1');
div1.style.width = '100px';
1
2

2）元素[‘属性名’]

var div1 = document.getElementById('div1');
div1.style['width'] = '100px';
1
2

两种方式的区别：
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>
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

可以看出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>
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

会发现这样是无法运行出正确结果的。因为编译器并不会把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>
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

这样会发现点击input按钮可以正确改变元素属性值了。

总结：
第一种方式非常简单方便，若没有特殊要求使用第一种方式是非常合适的选择。但是，如果有类似上面例子的用法，则必须使用第二种方式。
所以属性都是可以用第二种方式调用的，例如

var elem = document['getElementById']('div1');
1

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/113357