文章导航

JavaScript dataset

2018-12-5 00:11| 作者: admin| 查看: 55| 评论: 0|来自: 蚂蚁部落

dataset属性用来管理HTML元素自定义属性。

特别说明:此属性仅对符合HTML5规范,通过data-*语法格式规定的自定义属性。

关于data-*可以参阅data-* 自定义属性一章节。

一.HTML属性:

HTML属性分为内置标准属性与自定义属性。

内置标准属性,例如:

(1).id:元素的唯一标识。

(2).title:为元素附加额外的信息,通常鼠标悬浮会显示。

(3).class:与css的样式类关联。

自定义属性:

HTML5之前没有自定义属性的标注规范,基本上可以是随意定义。

代码如下:

[HTML] 纯文本查看 复制代码
<div antzone="蚂蚁部落"></div>

上面代码为div元素添加一个自定义属性antzone,属性值为"蚂蚁部落"。

为了便于管理HTML5对自定义属性进行了规范,通过dataset属性可以实现对其管理。

二.dataset属性:

利用此属性可以自定义属性的获取、添加或者修改操作。

语法结构一:

[JavaScript] 纯文本查看 复制代码
string = element.dataset.camelCasedName;

获取指定名称自定义属性的值,

语法结构二:

[JavaScript] 纯文本查看 复制代码
element.dataset.camelCasedName = string;

修改或者添加指定名称的自定义属性。

特别说明:属性名称如果有必要,需要用驼峰写法,后面会有详细介绍。

浏览器支持:

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

(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>
[data-softwhy]{
  color:red;
}
</style>    
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.dataset.softwhy="蚂蚁部落";
  }
}
</script>
</head>
<body>
<div id="ant">蚂蚁部落softwhy.com</div>
<input type="button" id="bt" value="查看演示"/>
</body>
</html>

点击按钮可以为div元素添加一个名称为"softwhy"的自定义属性。

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/05/001350uc2cfxeaxc8kpeya.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).添加自定义属性data-softwhy。

(2).但是在通过dataset添加自定义属性的时候,不能带有"data-"。

(3).添加此自定义属性后,会通过属性选择器div的字体颜色设置为红色。

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

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/05/001416fn3f32ikrgk3v8ik.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).data-前缀后面的属性名称也可以带有连字符。

(2).当使用dataset属性进行动态操作的时候,需要转换为驼峰写法。

三.与getAttribute/setAttribute的区别:

getAttribute和setAttribute方法也可以设置和获取元素的属性,主要区别如下:

(1).上述两方法更加博爱,无论是否符合data-*语法格式,都可以顺利获取或者设置。

(2).dataset则是专门针对符合HTML5规范的自定义属性的管理,更加方便。

(3).dataset属性返回值是DOMStringMap对象,也就是说针对DOMStringMap对象的操作,然后影响到HTML元素,而getAttribute/setAttribute方法则是针对字符串的操作。dataset属性返回值截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/05/001430jksccylue0rztlwc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部