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

码头

【相关推荐】

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/288700.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cdoj 1131 男神的礼物 区间dp

男神的礼物 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/1131 Description Lweb学长是集训队里公认的男神。有一天他要给美美的学姐姐准备礼物。Lweb学长可是会魔法的哟。为了准备一份礼物,男神要加工n份材料。每一次…

如何为同一 DTO 属性指定 2 个名称

前言我们在《实现DDD领域驱动设计》中谈到过输出 DTO 的最佳实践,其中一条是:保持输出 DTO 数量最少,尽可能重用。但是,对于 2 个不同接口输出的同一 DTO 属性,客户端可能需要对应不同的名称,比如&#xff…

HDU 4777 Rabbit Kingdom 树状数组

分析:找到每一个点的左边离他最近的不互质数,记录下标(L数组),右边一样如此(R数组),预处理 这个过程需要分解质因数O(n*sqrt(n)) 然后离线,按照区间右端点排序 然后扫一遍&#xff0…

按一行一行的方法将一个文本文件复制到另一个文件中_命令行技巧:分割文件内容...

(给Linux爱好者加星标,提升Linux技能)英文:Stephen Snow,翻译:Linux中国/MjSevenlinux.cn/article-10809-1.htmlFedora 发行版是一个功能齐全的操作系统,有出色的图形化桌面环境。用户可以很容易地通过单击动作来完成任…

java:遍历

import java.util.ArrayList;import java.util.Iterator;import java.util.List;/*** 遍历数组四种方法*/class Test {/*** 注:Iterator 迭代器*/public static void main(String[] args) {Test1 t new Test1();Test1 t1 new Test1();List list new ArrayList();…

谷歌浏览器之如何调试页面js

1 问题 谷歌浏览器如果调试页面js 2 举例子 比如我们需要调试www.baidu.com这个页面,我们需要先按下F12,然后再去点击Source,然后在找到相应的js文件,在左边进行打上断点,然后我们再刷新页面,然后我们在右边可以看到…

Matlab 2016b+TimeSat 3.1中文经典安装及使用教程(附下载地址)

本教程为博主刘一哥GIS原创,坚决打击侵权行为,严禁抄袭!!! 目录 一、Matlab2016b下载及安装 二、TimeSat 3.1软件安装 三、TimeSat 3.1软件的使用和说明详解

对象比较 ===三个等于号

可能这是我博客里面最短的博文了。 有关三个等于号的用法。。。 我在这个分类里只是记录一下php中少见的东西,或者说是php中书上不是太过详细介绍的东西。 那么我在这里直接引用php手册里面的内容吧,很简单:当使用比较运算符(&…

php判断秒为两位数,判“新”函数:得到今天与明天的秒数

判“新”函数:得到今天与明天的秒数更新时间:2006年10月09日 00:00:00 作者:如果你想根据时间来判断某一时间值(用秒数表示)是否在今天的范围之内。下面这个函数,将帮你轻而易举的判断。函数源代码:----------------…

如何查看文件夹里有几张图片_如何把几张图片合成一个pdf?图片合并为pdf的操作教程...

我在一家公司当美工,平时要接触到很多图片素材,并把它们以pdf格式文件的形式发送给客户查看(以此来摸索出客户想要的图片效果)。把几张图片合并成为一个pdf文件,即是将图片格式转换成为pdf格式,这对我来说不难操作。毕竟是公司的老…

HDU - 4734 F(x) (2013成都网络游戏,数字DP)

意甲冠军&#xff1a;求0-B见面<F[A]所有可能的 思维&#xff1a;数字DP&#xff0c;内存搜索 #include <iostream> #include <cstring> #include <algorithm> #include <cstdio> using namespace std;int A, B; int dp[20][200000]; int bit[20];i…

Dapr 能否取代 Spring Cloud?

Dapr 和 Spring Cloud 的区别很多人都是使用 Spring Boot 和 Spring Cloud 来开发微服务。Dapr 也是开发微服务的框架&#xff0c;它和 Spring Cloud 有什么区别呢&#xff0c;其实这不是一个区别的问题&#xff0c;它是不同的时代需要不同的框架。Spring Cloud 是一种产品&…

Start vm by command line

为什么80%的码农都做不了架构师&#xff1f;>>> VBoxHeadless -startvm "dcsvr08" 转载于:https://my.oschina.net/kut/blog/1501095

用dataGridView实现增删改查

只需一个窗体一个dataGridView控件,即可实现系统中所有基础数据的维护操作,真是太简单实用了,还不快Get了? 1、公共类User.cs: public abstract class DBUser {public static string sServer;public static string sDBName;public static string sUser;public static str…

php之生成器

引用手册&#xff1a;一个生成器函数看起来像一个普通的函数&#xff0c;不同的是普通函数返回一个值&#xff0c;而一个生成器可以yield生成许多它所需要的值。当一个生成器被调用的时候&#xff0c;它返回一个可以被遍历的对象.当你遍历这个对象的时候(例如通过一个foreach循…

使用JDBC进行数据库的事务操作(2)

本篇将讲诉如何使用JDBC进行数据库有关事务的操作。在上一篇博客中已经介绍了事务的概念&#xff0c;和在MySQL命令行窗口进行开启事务&#xff0c;提交事务以及回滚事务的操作。 似乎事务和批处理都可以一次同时执行多条SQL命令&#xff0c;但是事务是如果某一条SQL出错&#…

谷歌浏览器之如何快速找到js、css等文件

1 问题 我们分析前端代码的时候&#xff0c;需要快速定位某个js文件&#xff0c;然后查看里面的源代码 2 具体操作 比如我在www.baidu.com这个页面&#xff0c;我们先按下F12, 然后点击到network,然后我们再用快捷键 ctrl p 比如我们要找tu_d03f361.js 效果如下&#x…

ASP.NET Session的七点认识(转)

ASP.NET Session的使用当中我们会遇到很多的问题&#xff0c;那么这里我们来谈下经常出现的一些常用ASP.NET Session的理解&#xff1a; ASP.NET Session的七点认识之一对于值类型的变量&#xff0c;Session中保存的是值类型的拷贝 Session["__test0"] 1; inti (int)…

php 读取三级分类,php excel 导入 导入三级分类 表格应该怎么设计才能得到想要的数据格式?汗血宝马...

array (size16)0 >array (size7)0 > float 11 > string 销售部 (length9)2 > string 销售1区 (length10)3 > string 销售1科室 (length13)4 > null5 > null6 > null1 >array (size7)0 > float 21 > null2 > null3 > string 销售2科室 (…

ABP会臃肿吗?

有了ABP&#xff0c;还要学其他的框架&#xff1f;我有时候在想在JAVA领域&#xff0c;Spring基本一统天下&#xff0c;新手也好&#xff0c;高手也罢都在学习、研究和项目实战。也就是说其实对与应用开发&#xff0c;Spring已经是绕不开的框架&#xff0c;不管是单体还是微服务…