HTML5的data-* 要注意的问题

判定自定义属性的使用,网上有很多相关的介绍,主要点有两个:

1、如何判定浏览器是否支持此属性

2、如何兼容各浏览器

首先第一个问题,比较简单,直接使用dom.dataset,如果“===”undefined则不支持

如何在设置自定义数据属性时,兼容各浏览器的操作。我在写测试例子的过程时,发现一些问题(与属性的命令有关):

HTML的测试代码如下:

<!DOCTYPE html>
<html>
 <head>
  <title>data自定义属性</title>
  <meta charset="utf-8" /> 
  <meta name="viewport" content="width=620" /> 
  <style>
#test {
  padding: 10px;
  border: 1px solid #ccc;
  margin: 20px 0;
}
pre {
  overflow-x: auto;
  padding: 10px;
  border: 1px dashed #ccc;
  background: #fff;
  font-size: 12px;
}

#status {
  padding: 5px;
  color: #fff;
  background: #ccc;
}
 
#status.fail {
  background: #c00;
}
 
#status.success {
  background: #0c0;
}

#wrapper {width:620px; margin:0 auto;}
  </style>
 </head>

 <body>

<section id="wrapper">
    <p id="status"></p> 
    <div id="test" data-name="via el.dataset" data-height="short">This element has data</div>
    <pre><code id='code'></code></pre>

    <button onclick='getHandler()'>getData</button>
    <button onclick='setHandler()'>setData</button>
    <button onclick='hasHandler()'>hasData</button>
</section>
<script type='text/javascript'>
var state = document.getElementById('status'),
    code = document.getElementById('code'),
    test = document.getElementById('test');

function show() {
  code.innerHTML = test.outerHTML.replace(/[<>]/g, function (m) {
    return { '<': '&lt;', '>': '&gt;' }[m];
  });
  
  for (var prop in test.dataset) {
    code.innerHTML += '\nel.dataset.' + prop + ' = "' + test.dataset[prop] + '"';
  }
}

if (test.dataset === undefined) {
  state.innerHTML = 'dataset not supported';
  state.className = 'fail';
} else {
  state.className = 'success';
  state.innerHTML = 'element.dataset supported';
}

function getHandler() {
    show();
}

function setHandler() {
    test.dataset.newAttr = '11111';
    test.setAttribute("data-newAttr2", "22222");
    test.dataset['newAttr3'] = '333';
    
    show();
}

function hasHandler() {
    alert('newAttr:' + test.dataset.newAttr + '\n newAttr2:' + test.dataset.newAttr2 + '\n newAttr3:' + test.dataset.newAttr3);

    alert('newAttr:' + (test.hasAttribute('data-newAttr') ? "1" : "0"));
    alert('newAttr2:' + (test.hasAttribute("data-newAttr2") ? "1" : "0"));
    alert('newAttr3:' + (test.hasAttribute("data-newAttr3") ? "1" : "0"));
}
</script>

 </body>
</html>

测试所使用的浏览器:Chrome ver11.0.686.71

说说问题:

1、data-其后的属性名命名,发现如果为大写字母,则会转为 “-” + “小写字母”,如:

DOM.dataset.newAttrHaha 将会转换为属性“data-new-attr-haha”

2、data-其后的属性名命名,如果包含“-”紧接其后则不能为字母,可以为数字。如:DOM.dataset[‘newAttr-23aaa’]正确(转换方式按规则1处理)

DOM.dataset[‘newAttr-a23aaa’]则会报语法错误:

3、使用setAttribute定义的属性,如果中间包含”-”,转换规则有所不同,中间所有大写字母均转换为小写之母

DOM.setAttribute("data-newAttr2-abc", "22222") ==>  data-newattr2-abc=”2222”,获取它可以使用getAttribute(‘设定时的名称’)

DOM.getAttribute(“data-newAttr2-abc”)或是DOM.dataset.newattr2Abc获取。规则(1)中 “大写” ==》“-” + “小写”,在这里刚好获取则刚好相反 “-” + “小写”==》“大写”

如果是“-”+ “数字”,则保持原样不变

综上所述,在使用自定义属性时兼容各浏览器时,需要注意:

1、设置属性时尽量使用setAttribute(“data-xxx”),其中属性命名最好不要有大写的出现,避免出现“-”,推荐使用“char_char”,如:“favo_obj_id”

2、获取属性时,推荐使用dataset[‘attrName’] || getAttribute(‘data-attrName’)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术墨客

React学习(2)——状态、事件与动态渲染 原

    上一篇文章最后说明了组件传入的参数必须是只读的,但是在丰富的前端应用中,页面样式是时时刻刻会发生变化的。在前面的章节中介绍了一个时钟的例子,通过重复调用...

27510
来自专栏技术博客

Knockout.Js官网学习(click绑定)

click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button,input和连接a上,但是可以在任意...

12920
来自专栏coder修行路

css补充、JavaScript、Dom

css补充: position: fixed:可以将标签固定在页面的某个位置 absolute+relative:通过两者的结合可以让标签在一个相对的位置 代码...

19680
来自专栏从零开始学自动化测试

appium+python自动化30-list定位(find_elements)

前言 有时候页面上没有id属性,并且其它的属性不唯一,平常用的比较多的是单数(element)的定位方法,遇到元素属性不唯一,就无法直接定位到了。 于是我们可...

55970
来自专栏LIN_ZONE

Vue.js——60分钟快速入门(转载) Vue.js介绍声明该文是转载的,欢迎转载,支持尊重版权,原文作者:keepfool,原文地址:http://www.cnblogs.com/keepfo

Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于...

12920
来自专栏代码世界

jQuery

jQuery jQuery介绍 jQuery 是一个轻量级的、兼容多浏览器的JavaScript 库; jQuery 使用户能够更方便地处理HTML Docum...

56050
来自专栏前端儿

简单的鼠标可拖动DIV 兼容IE/FF

一个div,注册监听onmousedown事件,然后处理获取的对象及其相关值(对象高度,clientX/clientY位置等)

19710
来自专栏超然的博客

HTML5 data-* 自定义属性

  在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,使用这样的结构可以进行数据存放。使用dat...

15420
来自专栏柠檬先生

VUE 入门基础(7)

八,事件处理器 监听事件   可以用v-on 指令监听DOM 事件来触发一些javaScript     <div id="example-1">   ...

27690
来自专栏极乐技术社区

微信小程序入门《二》实例:条件渲染、数据遍历、网络请求、获取本地图片

实例内容 条件渲染 数据遍历 网络请求 获取本地图片 实例一: 条件渲染 如果motto为Hello World,则输出你好世界,否则原样输出。 这里是分支条件...

33690

扫码关注云+社区

领取腾讯云代金券