先声明  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. 【原】在Matplotlib绘图中添加Latex风格公式

    Matplotlib绘图的过程中,可以为各个轴的Label,图像的Title.Legend等元素添加Latex风格的公式. 只需要在Latex公式的文本前后各增加一个$符号,Matplotlib就可以 ...

  2. Maven支撑下的War应用依赖另外一个WAR应用的解决方案

    最近在做项目中,用Maven管理项目间的依赖关系,遇到一个问题,快折腾死了,不过初步试出来一种解决方案.在此把问题及解决方案描述一下,以资共享.   问题描述:有两个项目A和B,Dynamic Web ...

  3. [Tensorflow] Object Detection API - prepare your training data

    From: TensorFlow Object Detection API This chapter help you to train your own model to identify obje ...

  4. [UI] 03 - Bootstrap: component

    前言 一.框架体系 Bootstrap 是基于 HTML5.CSS3.JAVASCRIPT. 教程被分为: Bootstrap 基本结构. Bootstrap CSS. Bootstrap 布局组件 ...

  5. 02工厂方法模式FactoryMethod

    一.什么是工厂方法模式 工厂方法模式同样属于类的创建型模式又被称 为多态工厂模式 .工厂方法模式的意义是定义一个创建 产品对象的工厂接口,将实际创建工作推迟到子类当中. 核心工厂类不再负责产品的创建, ...

  6. POST 发送HTTP请求入参为:String url, Map<String, Object> propsMap

    /** * 发送HTTP请求 * * @param url * @param propsMap * 发送的参数 */ public static String httpSend(String url, ...

  7. C++ Release编译时如何对某段代码不进行优化

    optimize#pragma optimize( "[optimization-list]", {on | off} ) Feature Only in Professional ...

  8. Redis JdkSerializationRedisSerializer,stringRedisSerializer,ProtoBuf 体积,性能简单比较.

    /** * User: laizhenwei * Date: 2018-04-10 Time: 14:17 * Description: */ @RunWith(SpringRunner.class) ...

  9. 火狐浏览器报错“support.mozilla.org

    火狐浏览器有时候再打开新网页会报此错“support.mozilla.org 有时候火狐浏览器会出现如下状况 解决方法 在地址栏键入”about:config” 点击“我了解此风险” 在下方任意位置右 ...

  10. Flask web开发之路八

    今天写Flask_SQLAlchemy的外键及其关系 ### Flask-SQLAlchemy外键及其关系: 主app文件代码: from flask import Flask from flask_ ...