data-* 是H5的新属性,用来让开发者对标签添加自定义属性的。

其读写方式有如下几种:

  1. 如果是 data-abc 的格式,则采用正常格式 abc 来读写该属性值

    <div id="content" data-age="18">html5 data-*自定义属性 age</div>

    // 原生 js 方式读写

    var content= document.getElementById('content');

    console.log(content.dataset.age);//读

    content.dataset.name ="小白”;//写

    console.log(content.dataset.name);//读

    // jquery 方式读写

    console.log($('#content').data('age'));//读

    $('#content').data('name', "小黑");//写

    console.log($('#content').data('name'));//读

  2.  若果是 data-abc-abc-abc 的格式,则采用首字母小写的驼峰式 abcAbcAbc 读写该自定义属性值

    <div id="content" data-user-list="user_list">data-user-list自定义属性 </div>

    var list = [{name: "aa", age: 18},{name: "bb", age: 20}]

    // 原生 js 获取方式

    var content= document.getElementById('content');

    console.log(content.dataset.userList);//读

    content.dataset.userList=list;//写

    console.log(content.dataset.userList);//读

    // jquery 方式读写

    console.log($('#content').data('userList'));//读

    $('#content').data('userList', list);//写

    console.log($('#content').data('userList'));//读

  3.  getAttribute/setAttribute方法的使用

    <div id="content" data-name="小a">data-user-list自定义属性 </div>

    var content= document.getElementById('content');

    content.dataset.birthDate = '19990619';//写

    content.setAttribute('age', 25);//写

    console.log(content.getAttribute('data-birth-date')); //读

    console.log(content.getAttribute('data-age')); //读

关于H5的自定义属性data-*的更多相关文章

  1. H5对自定义属性的规定和添加获取自定义属性的方法

    H5对自定义属性的规定和添加获取自定义属性的方法 元素属性那么多,如何区分是自带的属性还是默认的属性呢? H5规定自带的属性有个data- 前缀,如data-index="1" & ...

  2. h5小功能_classList和自定义属性data

    ###1.classList返回一个对象集 通过obj.classList.add()或obj.classList.remove()可操作对象的class属性值 classList.toggle( ) ...

  3. 关于H5中自定义属性的设置和获取

    自定义数据属性是在HTML5中新加入的一个特性.简单来说,自定义数据属性规范规定任何以data-开头属性名并且赋值.自定义数据属性是为了保存页面或者应用程序的私有自定义数据,这些自定义数据属性保存进D ...

  4. h5笔记

    标签 更语义化标签 header标签 nav标签 section标签 article标签 aside标签 widget标签 footer标签 为什么要有语义化标签 能够便于开发者阅读和写出更优雅的代码 ...

  5. 自定义属性--JavaScript

    1 - 获取属性值 element.属性 获取属性值 element.getAttribute('属性') 区别: element.属性 --获取内置属性(元素本身自带的属性) element.get ...

  6. 移动端H5上传图片并压缩上传

    手头上的这个项目主要是在微信内运行的一个网站,需要用户上传手机内的照片,而现在手机照片尺寸越来越大,直接上传的话的确上传进度慢影响用户体验而且也会给服务器增加压力,所以利用H5的新特性压缩后上传不失为 ...

  7. h5 audio播放音频文件

    h5 audio播放音频文件 注:下面html中样式及不相关的内容去掉了 第一个例子 播放没有防盗链的外网音频文件是可以的 <!doctype html> <html> < ...

  8. ThinkPHP 5 整合支付宝微信支付(支付宝H5,微信H5、APP支付、公众号支付)

    因项目没有PC站所以没有写电脑网站支付. Pay.php支付控制器 <?php // +----------------------------------------------------- ...

  9. H5 语义化、基本事件 浅析 (含file对象、drag拖拽等)

    1.语义化标签 帮助搜索引擎,盲人设备等程序,辨识网页内容信息,明确网页区域分布,不体现任何样式,但存在浏览器兼容性问题,如IE8下无<header>标签. ① H5基本语义标签: < ...

随机推荐

  1. GTP

     GPRS隧道协议(GPRS Turning Protocol) GTP是一个高层协议,位于TCP/IP或UDP/IP等协议上,提供主机间端到端通信, 通过隧道标志(TEI)在路径协议上复用  GTP ...

  2. django中使用时间帅选报RuntimeWarning: DateTimeField Coupon.valid_begin_date received a naive datetime (2018-08-16 20:51:40.135425) while time zone support is active.

    今天在使用当前时间进行筛选数据时出现了RuntimeWarning: DateTimeField Coupon.valid_begin_date received a naive datetime ( ...

  3. annotation-config和component-scan

    以前学到<context:annotation-config></context:annotation-config>和<context:component-scan b ...

  4. Which mb sdconnect c4 worth the money?

    MB SD connect C4 with laptop v2018.5 Version avaiable now ,It is ready to work after you get it ,wor ...

  5. js小仓库

    1.千分位分隔符 const toDecimalMark = num => num.toLocaleString("en-US"); console.log(toDecima ...

  6. Django Rest Framework(阿奇)

    Django Rest Framework 一. 什么是RESTful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中 ...

  7. SQL语句exists用法

    首先头脑中有三点概念: 1 .  EXISTS子查询找到的提交 NOT EXISTS 子查询中 找不到的提交 说明:不要去翻译为存在和不存在,把脑袋搞晕. 2 . 建立程序循环的概念,这是一个动态的查 ...

  8. grunt 实例构建(四)

    相关插件的引用: grunt-usemin  对页面的操作 grunt-contrib-cssmin  压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...

  9. dgango 报错: Timeout when reading response headers from daemon process

    问题: image = np.asarray(bytearray(f.read()), dtype="uint8")cv2_img = cv2.imdecode(image, cv ...

  10. Google Map API抓取地图坐标信息小程序

    因为实验室需要全国城市乡镇的地理坐标,有Execl的地名信息,需要一一查找地方的经纬度.Google Map地图实验室提供自带的查找经纬度的方法,不过需要一个点一个点的手输入,过于繁琐,所以自己利用G ...