如何使用HTML5自定义数据属性

html5 自定义数据属性，也就是 data-* 自定义属性---笔记。

html5 自定义数据属性 ,也就是 data-* 自定义属性. 例如 <div data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div> 可以有三种方法访问和修改data: 1.使用getAttribute setAttribute 方法例如 div.getAttr…

在本文中,我将向你介绍如何使用HTML5自定义数据属性.我还将向你介绍一些开发人员在工作中经常使用的优秀实例. 为什么需要自定义数据属性? 很多时候我们需要存储一些与不同DOM元素相关联的信息.这些信息对于读者来说可能是不需要的,但是可以轻松的访问这些信息将会给我们开发者的工作带来极大的便利. 例如,假设你有一份某个餐饮类网站上所有餐馆的名单.在HTML5之前,如果你想存储餐馆提供的食物种类或餐馆与用户之间的距离等信息,那么你将使用HTML的class属性.但是如果你还需要存储餐馆的id以便查看…

Html5 自定义数据属性

html5 可以为元素添加自定义属性,但是要添加前缀data-.(下面这个例子中的自定义属性的命名,其实是不规范的,不应该包含大写字符,例如:data-myName 应改命名为:data-myname. 应为我们在维护别人的代码,所以就会遇到如下的问题.) <div ' data-myName="mDiv">class test</div> 定义好属性之后该如何访问属性呢,有两种方式:1.通过元素的dataset 属性来直接访问属性值.这也就是可能会有问题的地方…

【翻译】详解HTML5 自定义 Data 属性

原标题:HTML5 Custom Data Attributes (data-*) 你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的,那么我有一个令人激动的消息要告诉你!如果你回答不是,并且你还想,“咦,这个主意不错哦~”,那我劝你尽早放弃这个幼稚的想法,并看完本文. 多亏了HTML5,我们可以嵌入自定义的 data 属性给所有的HTML元素.这个 data 属性包含两部分: 属性名属性名以'data-'前缀开头,并且至少要有一…

HTML5自定义select标签样式的方法

HTML5自定义select标签样式的方法 -webkit-appearance: none; 这个东西可以隐藏箭头不过手机端就直接设置透明度为0就行了(如果这种做法比前面个要麻烦点毕竟还要对他赋值…

基于HTML5自定义文字背景生成QQ签名档

分享一款利用HTML5实现的自定义文字背景应用,首先我们可以输入需要显示的文字,并且为该文字选择一张背景图片,背景图片就像蒙版一样覆盖在文字上.点击生成QQ签名档即可将文字背景融为一体生成另外一张图片,你也可以下载这张拥有你QQ签名档的图片. 在线预览源码下载实现的代码. html代码: <canvas id="mycanvas" width="1280" height="512"></canvas> 内容:<…

html5 自定义验证信息

h5 为表单新增了很多类型,及属性. 根据这些新增的类型及属性 h5也为我们提供了验证这些数据的js函数,这些验证表单的函数都存在了ValidityState对象中,接下来让我们一起来了解一下这些函数的用法: ValidityState对象 ValidityState对象是通过validity 属性获取的,该对象有8个属性,分别针对8个方面的错误验证,属性值均为布尔值. 1．valueMissing属性必填的表单元素的值为空. 如果表单元素设置了required特性,则为必填项.如果必填项…

HTML5自定义data属性

可能大家在使用jquery mobile时,经常会看到data-role.data-theme等的使用,比如:通过如下代码即可实现页眉的效果: [html] <div data-role="header"> <h1>我是标题</h1> </div> 为什么写一个data-role="header"就能实现底部为黑色.文字居中显示的效果呢? 本文提供一种最简单的实现办法,让大家对这些用法有个直观的了解. 我们写…

【转载】HTML5自定义data属性

可能大家在使用jquery mobile时,经常会看到data-role.data-theme等的使用,比如:通过如下代码即可实现页眉的效果: [html] <div data-role="header"> <h1>我是标题</h1> </div> 为什么写一个data-role="header"就能实现底部为黑色.文字居中显示的效果呢? 本文提供一种最简单的实现办法,让大家对这些用法有…

html5 自定义标签取值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function(){ /* var oDiv=document.getElementById('div1'); alert(oDiv.dataset.yaoyuan…

html5自定义标签选择器

* E[attr]:只使用属性名,但没有确定任何属性值 * E[attr="value"]:指定属性名,并指定了该属性的属性值.必须和元素的属性完全匹配 * E[attr~="value"]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写 * E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的 * E[attr$="…

html5自定义数字键盘

原理:使用div模拟输入框,避免手机原生键盘弹出,键盘使用div模拟,点击事件使用js控制,光标闪烁使用css模拟,具体代码如下: <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1&quo…

IE11-IE不再任性了-关于attachEvent

今天解决了一个IE11的兼容问题,关于attachEvent的. 控件是ActiveX的,需要监听一个控件相关的事件.蓦然发现attachEvent在IE11不支持了...attachEvent不是IE专有的么?是啊,这是IE专属呃,这么多年,不离不弃.IE的attachEvent不支持捕获阶段的事件处理程序,并且同一个处理程序能添加多次.非标准的IE专属,在IE11,彻底自己抛弃了... IE11不再任性,走上了标准化的道路... 问题至此并没有解决,使用addEventListener仍然没…

Jsoup解析网页源码时常用的Element(s)类

Jsoup解析网页源码时常用的Element(s)类一.简介该类是Node的直接子类,同样实现了可克隆接口.类声明:public class Element extends Node 它表示由一个标签名,多个属性和子节点组成的html元素.从这个元素中,你可以提取数据,可以遍历节点树,可以操纵html. 二.构造方法 1.public Element(Tag tag, String baseUri, Attributes attributes) 创建一个新的.独立的元素.独立即没有父节点.…

总结：《jQuery基础教程》 5-完结

第5章:操作DOM HTML属性和DOM属性:attr()和prop() 获取表单控件的值:val() DOM操作方法的归纳: (1) 要在HTML中创建新元素,使用$()函数.(2) 要在每个匹配的元素中插入新元素,使用: .append() .appendTo() .prepend() .prependTo()104 第 5 章操作 DOM(3) 要在每个匹配的元素相邻的位置上插入新元素,使用: .after() .insertAfter() .before() .inse…

1.1选择select

一.核心(Core) 1.1选择 1.1.1 d3.select(selector) 选择第一个与指定字符串selector匹配的元素,如果没有就返回空. 例如: <table> <tr> <td>苹果</td> <td>香蕉</td> <td>西瓜</td> </tr> <tr> <td>桃子</td> <td id="test"&…

jsoup的Element类

一.简介该类是Node的直接子类,同样实现了可克隆接口.类声明:public class Element extends Node 它表示由一个标签名,多个属性和子节点组成的html元素.从这个元素中,你可以提取数据,可以遍历节点树,可以操纵html. 二.构造方法 1.public Element(Tag tag, String baseUri, Attributes attributes) 创建一个新的.独立的元素.独立即没有父节点.attributes指初始属性. 2.public E…

DOM扩展-HTML5、专有扩展

HTML5 与类相关的扩充 1.getElementsByClassName()方法改方法接受一个参数,即一个包含一或多个类名的字符串,返回带有指定类的所有元素的NodeList.传入多个类型时,先后顺序不重要. //取得所有类中包含"username"和"current"的元素,类名的先后顺序不重要 var allCurrentUsername = document.getElementsByClassName('username current'); //取…

HTML5自定义属性之data-*

HTML5 增加了一项新功能是自定义数据属性 ,也就是 data-* 自定义属性.在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放.当然高级浏览器下可通过脚本进行定义和数据存取.在项目实践中非常有用. <input type="button" value="按钮" data-index="10" data-index-color="red" > 在开始之前我们先来…

DOM扩展之 HTML5

11.3.1 与类相关的扩充 2. classList属性在操作类名时,需要通过className属性添加,删除和替换类名.因为className是一个字符串,所以即使只修改一部分内容也要设置整个字符串的值. 如<div class="user name age"></div> 则其className 为"user name age". HTML5新增了一种操作类名的方式,即为所有元素添加了classList属性.classList属性是新…

【特别推荐】Web 开发人员必备的经典 HTML5 教程

对于我来说,Web 前端开发是最酷的职业之一,因为你可以用新的技术发挥,创造出一些惊人的东西.唯一的问题是,你需要跟上这个领域的发展脚步,因此,你必须不断的学习,不断的前进.本文将分享能够帮助您快速掌握 HTML5 的实例教程,值得好好学习. 您可能感兴趣的相关文章太赞了!超炫的页面切换动画效果[附源码下载] 真是好东西!13种非常动感的页面加载动画效果你见过吗?9款超炫的复选框(Checkbox)效果超赞!基于 Bootstrap 的响应式的后台管理模板创意无限!一组网页边栏过渡动画[…

HTML5系列二（标签元素、FileReader、拖放）

nav元素的使用场合页面中可以包含多个nav元素,通常情况下头部和尾部都会包含导航,这样提高了可访问性,访客能够清晰的将其辨认出来.nav元素是一个可以用来作为页面导航的链接组:其中的导航元素链接到其他页面或当前页面的其他部分. <nav> <ul> <li><a href="http://www.cnblogs.com">博客园</a></li> <li><a href="/home…

HTML5 的data-* 自定义属性

HTML5增加了一项新功能是自定义数据属性,也就是 data-*自定义属性. 在HTML5中我们可以使用以data-为前缀来设置我们需要的自定义属性,来进行一些数据的存放. 当然高级浏览器下可通过脚本进行定义和数据存取.在项目实践中非常有用.例如: <div id="user" data-uid="12345" data-uname="愚人码头"></div> 使用attribute方法存取data-*自定义属性的值使用…

《HTML5与CSS3实例教程》

<HTML5与CSS3实例教程> 基本信息作者: (美)Brian P. Hogan 译者: 卢俊祥丛书名: 图灵程序设计丛书出版社:人民邮电出版社 ISBN:9787115363404 上架时间:2014-7-25 出版日期:2014 年8月开本:16开页码:1 版次:1-1 所属分类:计算机 > 数码/设计 > CSS 计算机 > 软件与程序设计 > 网络编程 > HTML 更多关于>>> <HTML5与CSS3实例教程>…

Html5 常见的新增API详解

1. getElementsByClassName()方法 getElementsByClassName()方法接收一个参数,即一个包含一或多个类名的字符串,返回带有指定类的所有元素的NodeList.传入多个类名时,类名的先后顺序不重要. //取得所有类中包含"username"和"current"的元素,类名的先后顺序无所谓 var allCurrentUsernames = document.getElementsByClassName("usern…

html自定义调控

为什么需要自定义数据属性? 很多时候我们需要存储一些与不同DOM元素相关联的信息.这些信息对于读者来说可能是不需要的,但是可以轻松的访问这些信息将会给我们开发者的工作带来极大的便利. 例如,假设你有一份某个餐饮类网站上所有餐馆的名单.在HTML5之前,如果你想存储餐馆提供的食物种类或餐馆与用户之间的距离等信息,那么你将使用HTML的class属性.但是如果你还需要存储餐馆的id以便查看用户想要访问的特定餐厅该怎么办? 以下是基于HTMLclass属性的方法存在的一些问题: HTMLclass属性…