php html标签自定义属性,详解H5的自定义属性data-*
HTML5 增加了一项新功能是 自定义数据属性 ,也就是 data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放
当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。
例如:
代码如下:
使用attribute方法存取 data-* 自定义属性的值
使用attributes方法存取 data-* 自定义属性的值非常方便:
代码如下:// 使用getAttribute获取 data- 属性
var user =
document
. getElementById ( 'user' ) ;
var userName = plant . getAttribute ( 'data-uname' ) ; // userName = '脚本之家'
var userId = plant . getAttribute ( 'data-uid' ) ; // userId = '12345'
// 使用
set
Attribute设置 data- 属性
user . setAttribute ( 'data-site' , 'http://www.jb51.net' ) ;
此方法能在所有的现代浏览器中正常工作,但它不是HTML 5 的自定义 data-*属性被使用目的,不然和我们以前使用的自定义属性就没有什么区别了,例如:
代码如下:
// 使用getAttribute获取 data- 属性
var user = document . getElementById ( 'user' ) ;
var userName = plant . getAttribute ( 'uname' ) ; // userName = '脚本之家'
var userId = plant . getAttribute ( 'uid' ) ; // userId = '12345'
// 使用setAttribute设置 data- 属性
user . setAttribute ( 'site' , 'http://www.jb51.net' ) ;
这种“原始”的自定义属性和上面 data-* 自定义属性没什么区别,知识属性名不一样。
dataset属性存取data-*自定义属性的值
这种方式通过访问一个元素的 dataset 属性来存取 data-* 自定义属性的值。这个 dataset 属性是HTML5 JavaScript API的一部分,用来返回一个所有选择元素 data- 属性的DOMStringMap对象。
使用这种方法时,不是使用完整的属性名,如 data-uid 来存取数据,应该去掉data- 前缀。
还有一点特别注意的是: data- 属性名如果包含了连字符,例如:data-date-of-birth ,连字符将被去掉,并转换为驼峰式的命名,前面的属性名转换后应该是: dateOfBirth 。
代码如下:
码头
var el = document.querySelector('#user');
console.log(el.id); // 'user'
console.log(el.dataset);//一个DOMStringMap
console.log(el.dataset.id); // '1234567890'
console.log(el.dataset.name); // '脚本之家'
console.log(el.dataset.dateOfBirth); // ''
el.dataset.dateOfBirth = '1985-01-05'; // 设置data-date-of-birth的值.
console.log('someDataAttr' in el.dataset);//false
el.dataset.someDataAttr = 'mydata';
console.log('someDataAttr' in el.dataset);//true
如果你想删掉一个 data-属性 ,可以这么做: delete el . dataset . id ; 或者 el .dataset . id = null ; 。
看起来很美,哈哈,但是不幸的是,新的 dataset 属性只有在Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+浏览器中实现,所以在此期间最好用的getAttribute和setAttribute来操作。
关于data-属性选择器
在实际开发时,您可能会发现它很有用,你可以根据自定义的 data- 属性选择相关的元素。例如使用querySelectorAll选择元素:
代码如下:
// 选择所有包含 'data-flowering' 属性的元素
document . querySelectorAll ( '[data-flowering]' ) ;
// 选择所有包含 'data-text-colour' 属性值为red的元素
document . querySelectorAll ( '[data-text-colour="red"]' ) ;
同样的我们也可以通过 data- 属性值对相应的元素设置CSS样式,例如下面这个例子:
代码如下:
.user {
width
: 256px ;
height
: 200px ;
}
.user[data-name='feiwen'] {
color : brown
}
.user[data-name='css'] {
color : red
}
class
= "user" data-id = "123" data-name = "feiwen" > 1
码头
【相关推荐】
php html标签自定义属性,详解H5的自定义属性data-*相关推荐
- h5列表 php,H5的标签使用详解
这次给大家带来H5的标签使用详解,使用H5标签的注意事项有哪些,下面就是实战案例,一起来看一下. 不允许写结束标记的标签:area(定义图像映射中的区域).base(为页面上的所有链接规定默认地址或默 ...
- 04-HTML标签图文详解(一)
一.排版标签 注释标签 <!-- 注释 --> 段落标签<p> <p>This is a paragraph</p> <p>This is ...
- HTML标签图文详解(二)
上篇博文我们对HTML有了大致的认识并且熟悉了一些基本的标签 HTML标签图文详解(一) 接下来我们开始更加深入的学习 <body>标签的属性 其属性有: bgcolor:设置整个网页的背 ...
- html标签非成对,深入document.write()与HTML4.01的非成对标签的详解
深入document.write()与HTML4.01的非成对标签的详解 (一)HTML4.01中的非成对标签: 注释标签: 严格来讲不算HTML标签的:文档声明标签 设置页面元信息的:标签 设置网页 ...
- HTML标签图文详解(三)
前两篇博文我们学习了HTML的基础知识与标签 HTML标签图文详解(一) HTML标签图文详解(二) 现在我们开更加深入的学习 本文主要内容 列表标签:<ul>.<OL>.&l ...
- html frameset 属性,html frameset标签怎么用?html frameset标签属性详解
html frameset标签怎么用?html frameset标签属性详解,本篇文章主要讲述了html frameset标签的定义和用法,还有html frameset标签两个属性的用途(附实例) ...
- JSP中meta标签之详解
JSP中meta标签之详解 2013年01月26日 16:09:27 阅读数:5589 JSP标签 <meta.....>作用总结 <metahttp-equiv="pra ...
- git对指定commitid 打tag_Git 标签使用详解
Git跟其他版本控制系统一样,可以打标签(tag)标记一个版本号. 发布一个版本时,我们通常先在版本库中打一个标签,这样,就唯一确定了打标签时刻的版本.将来无论什么时候,取某个标签的版本,就是把那个打 ...
- audio标签的controls属性_HTML5教程 audio标签属性详解
本篇教程探讨了HTML5教程 audio标签属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < src:String型,所播放音频的 url. auto ...
最新文章
- winpython使用教程-如何使用Python自动控制windows桌面
- 通过nginx链接mysql事务问题_nginx-关于phpmysql的事务
- Objective-C NSString字符串操作总结
- 使用C# lock同时访问共享数据
- matlab的fftn,matlab fftn
- Android性能优化——界面流畅度优化
- 公司安排员工扫地,引发员工不满,程序员:保洁阿姨都请不起?
- 计算机网络学习(九)—应用层的概述
- 蓝桥杯 BASIC-3 基础练习 字母图形
- postfix+ldap
- Utils 前端随机生成id,中文姓名
- python导入numpy模块_Python之路-numpy模块
- oracle设计案例,Oracle课程设计案例精编
- python operator.add_Python模块:operator简单介绍
- python三维曲面合并_绘制多面体的三维曲面
- 干货 | 拆解一个 Elasticsearch Nested 类型复杂查询问题
- 如何设计游戏中的道具功能(三)
- 开放银行赋能供应链金融,连接企业生态场景
- HTML无序列表布局
- STC-ISP一直显示“正在检测目标单片机”的解决办法
热门文章
- .NET Core用数据库做配置中心加载Configuration
- 边缘计算k8s集群之SuperEdge
- Blazor 准备好为企业服务了吗?
- [C#.NET 拾遗补漏]10:理解 volatile 关键字
- 通过 Continual Learning 提高 ML.NET 模型准确性并增强性能
- 了解下C#由转换二进制所引起的思考
- Magicodes.IE 2.2里程碑需求和建议征集
- .Net开发3年,应聘大厂惨遭淘汰,如何翻身打脸面试官?
- 基于gRPC服务发现与服务治理的方案
- 修复迁移后Net Standard项目中的错误