HTML5 data-* 自定义属性】的更多相关文章

HTML5——Data Url生成 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>如何用HTML5的FileReader生成Data Url</title> <script type="text/javascript"> function imageDataUrl(source) { var file =…
html5 data属性定义和用法 <ul> <li data-animal-type="bird">Owl</li> <li data-animal-type="fish">Salmon</li> <li data-animal-type="spider">Tarantula</li> </ul> data-* 属性用于存储页面或应用程序的私有自定义…
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用.这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情. 你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和…
对于html5 的data使用 <div id='testDiv' data-value='123' data-name='china'> 通过var v = document.getLElementById('testDiv').dataset.value 另外可通过document.getElmentById('testDiv').data('value','123')的形式存储…
当然高级浏览器下可通过脚本进行定义和数据存取.在项目实践中非常有用. 例如: 复制代码 代码如下: <div id = "user" data-uid = "12345" data-uname = "脚本之家" > </div> 使用attribute方法存取 data-* 自定义属性的值 使用attributes方法存取 data-* 自定义属性的值非常方便: 复制代码 代码如下: // 使用getAttribute获取…
在HTML元素上直接添加以‘data-’开头的属性,例如 <div data-mydata='this is my data'></div> 操作它的方式有classList 和dataset,见我另一篇博客: 链接:https://www.cnblogs.com/yummylucky/p/10685650.html dataset 与 getAttribute/setAttribute 的区别是: dataset 只可以操作 ‘data-’ 开头的自定义属性,而 getAttri…
在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,命名可以用驼峰命名方式,但取值是必需全部使用小写,否则是undefinde 使用这样的结构可以进行数据存放.使用data-*可以解决自定义属性混乱无管理的现状.    小写 <div id="app" data-app="app">驼峰式 let cour = document.querySelector('#cour'); 获取data-的…
新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取.它的数量不受限制,并且也能由JavaScript动态修改,也支持CSS选择器进行样式设置.这使得data属性特别灵活,也非常强大.有了这样的属性我们能够更加有序直观的进行数据预设或存储.下面介绍Html5 Dataset 存储的实际应用,以及包括jQuery在内的四种存取方式. <span id="music-latch" class="musique" data…
<!--原生获取方法--> <div data-id="id=1"></div> <script> //js原生获取方法 var id = this.getAttribute('data-id'); var id = this.dataset.id //jquery方法获取 var id = $(this).attr('data-di') var id = $(this).data('id') </script>…
https://blog.csdn.net/qq_31851435/article/details/53100691 <div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div> 方法一 var myDiv = document.getElementById("myDiv"); var theValue = myDiv.getAttribute("us…