html5自定义属性怎么使用

这篇文章主要介绍了html5自定义属性怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇html5自定义属性怎么使用文章都会有所收获,下面我们一起来看看吧。

网站建设哪家好,找创新互联公司!专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了江门免费建站欢迎大家使用!

html5自定义属性“data-*”用于存储私有页面后应用的自定义数据,而自定义的数据可以让页面拥有更好的交互体验(不需要使用Ajax或去服务端查询数据),语法“”;“data-*”属性由两部分组成:1、属性名不要包含大写字母,在“data-”后必须至少有一个字符;2、属性值,该值可以是任何字符串。

本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

html5自定义属性data-*

data-* 属性用于存储私有页面后应用的自定义数据,是 HTML5 新增的属性。

  • somevalue:指定属性值 (一个字符串)

data-* 属性可以在所有的 HTML 元素中嵌入数据。

自定义的数据可以让页面拥有更好的交互体验(不需要使用 Ajax 或去服务端查询数据)。

data-* 属性由以下两部分组成:

  • 属性名不要包含大写字母,在 data- 后必须至少有一个字符。

  • 属性值,该属性值可以是任何字符串

注意: 自定义属性前缀 "data-" 会被客户端忽略。

利用dataset可以获取data-属性构造的对象,该方法目前只能在Chrome 、Opera等部分浏览器中实现,其他浏览器如需获取其属性值需要使用getAttribute和setAttribute来操作。

只要在标签里面以”data-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放。

在标签里设置H5新增的自定义属性

这个data属性还可以应用在CSS中,前提是你的浏览器支持after伪类,以及content的attr属性(低版本的IE不支持):

data属性应用于CSS中
#myDiv{
  position: ralative;
}
 
#myDiv:hover:after{
  position: absolute;
  top: 0px;
  left: 0px;
  content: attr(data-attribute);
  color: red;
}

如何获取data属性的值?

在标签里设置H5新增的自定义属性

1、使用getAttribute来获取

var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");

2、使用Html5自定义属性对象Dataset来获取

var myDiv = document.getElementById("myDiv");
 
var theValue = myDiv.dataset.attribute;

注意:带连字符连接的名称在使用的时候需要命名驼峰化,即大小写组合书写,这与应用元素的style对象类似,dom.style.borderColor。例如data属性为data-other-attribute,则我们要获取相应的值可以使用:myp.dataset.otherAttribute

如果Html元素定义了多个自定义属性,如何获取?

在标签里设置多个自定义属性

2、使用循环遍历

 var myDiv = document.getElementById("myDiv");
var attrs = myDiv.attributes,
var expense = {}, i, j;  
for (i = 0, j = attrs.length; i < j; i++) {
  if(attrs[i].name.substring(0, 5) == 'data-') {
    expense[attrs[i].name.substring(5)] = attrs[i].value;
  }
}

3、使用dataset属性

var expense = document.getElementById('myDiv').dataset;

注:dataset并不是典型意义上的JavaScript对象,而是个DOMStringMap对象DOMStringMap是HTML5一种新的含有多个名-值对的交互变量

1)、让所有的自定义的属性值塞到一个数组中

var chartInput = [];
 
for (var item in expense) {
  chartInput.push(expense[item]);
}

2)、删掉一个data属性

delete myDiv.dataset.attribute;

3、增加一个data属性

myDiv.dataset.attribute4 = 'value4';

dataset的兼容性处理

如果浏览器不支持dataset,有必要做一下兼容处理:

if(myDiv.dataset) {
  myDiv.dataset.attribute = "valueXX"; // 设置自定义属性
  var theValue = myDiv.dataset.attribute; // 获取自定义属性
} else {
  myDiv.setAttribute("data-attribute", "valueXX"); // 设置自定义属性
  var theValue = myDiv.getAttribute("data-attribute"); // 获取自定义属性
}

关于“html5自定义属性怎么使用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“html5自定义属性怎么使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。


名称栏目:html5自定义属性怎么使用
网站路径:http://scyanting.com/article/pjigsd.html

其他资讯