先声明  HTML5的自定义属性浏览器支持性不太好   目前只有firefox6+和chrome浏览器支持

元素除了自带的属性外 另外也可以加自定义属性   不过需要在前面加上data-

下面举个例子

<div class="btn user" data-appid='我是自定义属性的值'>我是div</div>

怎样获得   和更改自定义属性呢?  通过dataset属性

console.log(document.compatMode)
var div=document.querySelector('.btn');
console.log(div)
var appid=div.dataset.appid;
console.log(appid);//我是自定义属性的值
//更改一下自定义属性的值
div.dataset.appid=23456;
console.log(div.dataset.appid)//23456

目前支持  不好   不代表以后支持不好 了解点不算过

HTML5 自定义属性的更多相关文章

  1. HTML5自定义属性对象Dataset简介

    一.html5 自定义属性介绍 我之前翻译的“你必须知道的28个HTML5特征.窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍,就是在HTML5中我们可以使用data-前缀设 ...

  2. Jquery 操作HTML5自定义属性data-*

    HTML5自定义属性规范的写法<a data-roleid="12"></a>,也可以直接写<a roleid="12">& ...

  3. HTML5 自定义属性 data-*属性名一定要小写吗?

    最近学习 javascript ,参考书籍是< javascript 高级程序设计>第三版,在介绍自定义元素属性时书中给出了一个例子,如下:<div id="myDiv&q ...

  4. HTML5自定义属性操作

    一.自定义属性(html5标准)data-属性名称="属性值" 自定义属性的名称驼峰式命名规则需要用-隔开 自定义属性名称如果连在一起写,大写会自动转为小写 data-user=& ...

  5. HTML5自定义属性之data-*

    HTML5 增加了一项新功能是 自定义数据属性 ,也就是  data-* 自定义属性.在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放.当然高级浏览器下 ...

  6. HTML5 自定义属性 data-*介绍

    在HTML5之前HTML4我们也可以自定义属性通过setAttribute去设置或者直接写在HTML标签里面那么HTML5新增data-*(*可以替换成你喜欢的任意名字)属性有什么用呢? 更便的捷操作 ...

  7. HTML5自定义属性的设置与获取

    <div id="box" aaa="bbb" data-info="hello"></div> <body& ...

  8. html5——自定义属性

    自定义属性:添加前缀"data-" dataset属性:添加自定义属性后,通过元素的dataset属性来访问自定义属性的值(属性名没有data-前缀) data-name:data ...

  9. HTML5 自定义属性 data-* 和 jQuery.data 详解

    新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取.它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置.这使得dat ...

随机推荐

  1. halcon模板匹配

    在机器视觉应用中,经常需要对图像进行仿射变换.1.在基于参考的视觉检测中,由于待检图像与参考图像或多或少都会存在几何变化(平移.旋转.缩放等),所以在做比较之前一般都要对待检图像进行仿射变换以对齐图像 ...

  2. Oracle分析函数-排序排列(rank、dense_rank、row_number、ntile)

    (1)rank函数返回一个唯一的值,除非遇到相同的数据时,此时所有相同数据的排名是一样的,同时会在最后一条相同记录和下一条不同记录的排名之间空出排名. (2)dense_rank函数返回一个唯一的值, ...

  3. NoSuchMethodError: ... addOnCompleteCallback

    问题描述: 使用ES 2.3.1和Spark streaming 2.1时,出现以上报错信息. 原因: addOnCompleteCallback方法在spark2.0中移除了 The addOnCo ...

  4. centos7系统下安装php-fpm并配置nginx支持并开启网站gzip压缩

    注:此处不介绍nginx的安装.以下教程默认已安装nginx. 1. yum install -y php-fpm yum install php-pdo yum install php-mysql ...

  5. json 字符串包含数组转换为object对象是报异常java.lang.ClassCastException: net.sf.ezmorph.bean.MorphDynaBean cannot be cast to

    前台传到后台的json字符串 前台实现这种格式json字符串方式: function contentFun(){ respType = respTypeFun(); return "{\&q ...

  6. centos7 防火墙

    1.firewalld的基本使用 启动: systemctl start firewalld 关闭: systemctl stop firewalld 查看状态: systemctl status f ...

  7. electron安装+运行+打包成桌面应用+打包成安装文件+开机自启动

    1.初始化node项目,生成package.json文件 npm init 2.安装electron,并保存为开发依赖项 npm install electron -D 3.根目录下新建index.j ...

  8. linux 设置中文版man手册

    作为CentOS 新手,看懂英文man固然重要,不过配置好中文man也可以让自己更快速地学习!1. 下载中文man包源码的网址:https://src.fedoraproject.org/repo/p ...

  9. You are using pip version 9.0.1, however version 18.0 is available. You should consider upgrading via the 'pip install --upgrade pip' command.

    实测使用pip3进行一些软件安装的时候,会弹出这个,记住不要理会,一旦你执行,就会升级pip,并冲突pip3造成pip3不能用,这时候就要重新安装一下python3

  10. XmlHelpers

    最近处理数据的时候用到了Xml和其他数据之间的转换,所以整理了一些方法. class XMLHelper { /// <summary> /// 读取xml模板 /// </summ ...