Javascript中获取元素属性的两种方式

最新推荐文章于 2023-11-19 13:18:25 发布

ʚ 甜甜的小荔枝 ɞ

最新推荐文章于 2023-11-19 13:18:25 发布

阅读量4.8k

点赞数 2

分类专栏： JS 文章标签： javascript js css html

本文链接：https://blog.csdn.net/cuteeeee/article/details/107774281

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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');

ʚ 甜甜的小荔枝 ɞ

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Javascript中获取元素属性的两种方式

JS有两种获取元素属性的方式：1）元素.属性名var div1 = document.getElementById('div1');div1.style.width = '100px';2）元素['属性名']var div1 = document.getElementById('div1');div1.style['width'] = '100px';两种方式的区别：1）第一组种方式简单、好用。2）第二组方式可以解决一些第一种方式解决不了的问题，例如通过参数传递属性名。在这里给
复制链接

扫一扫