文章导航

JavaScript getAttribute()

2018-12-4 14:53| 作者: admin| 查看: 1572| 评论: 0|来自: 蚂蚁部落

getAttribute方法可以返回元素指定属性的值。

如果对应的属性不存在,那么方法返回null或者空字符串""。

特别说明:如果属性不存在,在当前标准浏览器返回null,比较老旧浏览器可能返回""。

与此方法对应的是setAttribute,具体参阅JavaScript setAttribute()一章节。

不少朋友可能有这样的疑问,直接通过dom对象就可以获取其对应属性:

[JavaScript] 纯文本查看 复制代码
dom.id

比如上述代码可以获取元素的id属性值,那为何还要使用getAttribute方法。

后面会通过代码实例进行详细的分析介绍两者之间的区别差异。

语法结构:

[JavaScript] 纯文本查看 复制代码
element.getAttribute(attributename)

参数解析:

(1).attributename:必需,属性名称。

浏览器支持:

(1).IE浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).谷歌浏览器支持此方法。

(4).opera浏览器支持此方法。

(5).火狐浏览器支持此方法。

(6).safria浏览器支持此方法。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:120px;
  height:60px;
  text-align:center;
  line-height:60px;
  background-color:#ccc;
}
</style>
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.innerHTML=odiv.getAttribute("id");
  }
}    
</script>
</head>
<body>
  <div id="ant"></div>
  <input type="button" id="bt" value="查看效果"/>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/04/145536e1b96jw91pe3ubbc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

点击按钮可以将div元素的id属性值写入div。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:120px;
  height:60px;
  text-align:center;
  line-height:60px;
  background-color:#ccc;
}
</style>
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.innerHTML=odiv.getAttribute("data-ant");
  }
}    
</script>
</head>
<body>
  <div id="ant" data-ant="蚂蚁部落"></div>
  <input type="button" id="bt" value="查看效果"/>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/04/145558kcwfswetr3lwb3te.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).data-ant是符合HTML5规范的自定义属性,此方法对于非规范自定义属性同样有效。

(2).通过getAttribute方法可以将其属性值写入div。

(3).特别注意的是,属性名称必须写全,这一点与dataset属性不同。

关于dataset的用法参阅JavaScript dataset 属性 一章节。

getAttribute方法与dom对象直接获取属性值区别:

两种方式都可以获取对应属性的值,但是区别也很明显。

dom对象只能获取HTML内置标准属性的值,比如id或者title,对于自定义属性返回值为undefined。

getAttribute方法则能力更加强大,没有上述限制,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:120px;
  height:60px;
  text-align:center;
  background-color:#ccc;
}
</style>
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    let str="";
    str=str+odiv.getAttribute("antzone");
    str=str+"<br/>"+odiv.antzone;
    odiv.innerHTML=str;
  }
}    
</script>
</head>
<body>
  <div id="ant" antzone="蚂蚁部落"></div>
  <input type="button" id="bt" value="查看效果"/>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/04/145630mbahash1yjx7ojhy.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

再来看一个两者的区别,对于style属性和事件属性,区别也非常明显:

(1).dom.style返回的是一个对象,而getAttribute("style")返回的是CSS代码。

(2).dom.onclick之类的返回的是一个方法,而getAttribute("onclick")返回的是代码字符串。

非常的简单,感兴趣的朋友可以自行做一下演示,如果有不明之处,可以在文章底部留言。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部