嗨,我是沐晴,今天来说说JS中关于获取属性的一些方法和区别。闲话不说,来正题。
首先什么是属性呢,比如input标签,标签中的value id type style等,这些就是属性。我们JS获取属性一般有三种方法:
1 通过点的方式
2 通过括号的形式
3 通过 DOM的方式
通过栗子说明:
<input type="text" value="hello" id="text"/>
var oText = document.getElementById("text")
1 通过点的方式 oText.value
需要注意的是:
1 点要查找的是JS中本来就存在的属性名,不能找到变量或者函数的参数。比如下面
增加代码:
var name = "value"
oText.name
//这种方式访问就会出错,因为点的方式访问,它会去input的标签里面直接到有没有name的属性,如果没有就找不到,所以访问不到我们定义的这个变量的值
//而且如果name是某个函数的参数也不可以获取到,原理是一样的。所以封装函数属性需要作为参数的时候,访问的时候不要用点,用括号
2 标准浏览器下无法访问html中的自定义属性,可以获取通过JS参加的自定义属性
3 无法获取相对网址 比如img.src 获取的只是绝对路径
2 通过括号的形式 oText.value
1可以访问任何变量,也可以访问参数
2 标准浏览器下无法访问html中的自定义属性,可以获取通过JS参加的自定义属性(同上)
3 无法获取相对网址 比如img.src 获取的只是绝对路径(同上)
3 通过DOM的方式
涉及到三个方法
获取属性的值:getAttribute(属性名) oText.getAttribute('value')
设置属性的值:setAttribute(属性名, 要设置的值) oText.setAttribute('value','hello')
删除:removeAttribute(属性名) oText.getAttribute('value')
相比于上面的优势:
1 可以获取html中自定义的属性
2 获取的是相对网址,不过 IE7以下还是绝对网址
3 IE下可以通过style访问
<input type='text' style='width:100px;' />
var oText = document.getElementById("text")
//IE下可以这样用:oText.style.getAttribute('width') 标准浏览器不可以
一般情况下,用第三种方法的时候并不多,所以能用简单的方法就用简单的,按需要使用。。。。