html data自定义,HTML5自定义data属性

可能大家在使用jquery mobile时，经常会看到data-role、data-theme等的使用，比如：通过如下代码即可实现页眉的效果：

[html]

我是标题

为什么写一个data-role="header"就能实现底部为黑色、文字居中显示的效果呢？

本文提供一种最简单的实现办法，让大家对这些用法有个直观的了解。

我们写一个html页面，自定义一个data-chb="header"的属性，希望具备这个属性的div区域背景颜色为黑色，文字为白色，居中显示；不具备data-chb自定义属性的div按照默认方式显示，html代码如下：

[html]

我是使用了data-chb自定义属性的div

我没有使用data-chb自定义属性，该怎么展现就怎么展现；

要想实现"背景颜色为黑色，文字为白色，居中显示"的显示效果，我们定义如下的css：

[css]

.ui_header {

text-align: center;

color:white;

border:1px solid #000;

}

然后我们通过如下js方法实现在页面加载时，动态添加css定义，改变具备data-chb属性的div的显示样式：

[javascript]

window.οnlοad=function(){

var elems = document.getElementsByTagName("div");

if(elems!=null&&elems.length>0){

var length = elems.length;

//遍历所有DIV控件

for(var i=0;i

var elem = elems[i];

//获取该控件的自定义属性

var customAttr = elem.dataset.chb;

//也可以通过如下方式获得自定义属性

//var customAttr = elem.dataset["chb"];

//如果是我们预先定义好的header值，表示需要处理

if(customAttr=="header"){

//添加样式

elem.setAttribute("class","ui_header");

}

}

}

}

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

原标题:HTML5 Custom Data Attributes (data-*) 你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的, ...

【转载】HTML5自定义data属性

可能大家在使用jquery mobile时,经常会看到data-role.data-theme等的使用,比如:通过如下代码即可实现页眉的效果:   [html] 

js 获取html5的data属性

我以前一直以为只能用jquery的data()来获取 哈哈 是我太弱了

dat ...

js获取自定义data属性

Owl

HTML data属性简介以及低版本浏览器兼容算法

实例 使用 data-* 属性来嵌入自定义数据:

• Owl

jquery data属性 attr vs data

html5的自定义data属性相信大家都不会陌生,有了它你可以绑定所需的数据到指定元素上.然后通过jquery设置.获取数据,简直开心的不行啊.想到设置.获取元素属性值,大家一定首先想到了jquery ...

随机推荐

删除顽固node_modules

在工作中有用到gulp,webpack,使用他们需用依赖node的一些模块包,于是会在目录下生成一个node_modules文件夹.有一次想删掉它重新生成模块包的时候发现根本不太可能,无穷无尽的报一个 ...

UVaLive 7375 Hilbert Sort (递归，四分图，模拟)

题意:告诉你一条希尔伯特曲线的大小,然后给你n 个人,及n 个人的坐标,你的起点是左下角,终点是右下角,按照希尔伯特的曲线去走,按照这个顺序给n个人排序, 按顺序输出每个人的名字! 析:这就是一个四分 ...

一个小程序[Socrates]中学到的Perl点滴

1. 抓取网页源文件,只要三行代码 use LWP::Simple; $url='http://music.baidu.com/top/dayhot'; $page=get($url) or die ...

Lamda和Linq语法对比详细

本人转载:http://www.cnblogs.com/knowledgesea/p/3897665.html 闲言碎语 近期比较忙,但还是想写点什么,就分享一些基础的知识给大家看吧,希望能帮助一些l ...

HDU--1213并查集

题目传送门:HDU--1213 //题意:ignatius过生日,客人来到,他想知道他需要准备多少张桌子.然而一张桌子上面只能坐上相互熟悉的人, //其中熟悉可定义成为A与B认识,B与C认识,我们就说 ...

Android手机ROM刷机简介

这一段时间刷了一堆ROM,安卓系列.CM.Hero.OldMos.隔壁新出的Android2.0,反正都尝了一下鲜,手机的照相机也刷得再也启不来了(不知道什么原因,杯具).有话说:"久病成良 ...

Luogu2792 [JSOI2008]小店购物

Luogu2792 [JSOI2008]小店购物 重题 bzoj4349 最小树形图 有 \(n\) 个物品,每个物品有价格 \(c_i\) 和所需个数 \(k_i\) ,所有物品必须恰好买 \(k_ ...

selenium-server-standalone 和selenium-server, selenium-java的区别

https://stackoverflow.com/questions/30865539/selenium-server-standalone-jar-vs-selenium-java-jar

学习笔记26— roc曲线(python)

一.概念: 准确率(Accuracy), 精确率(Precision), 召回率(Recall)和F1-Measure 机器学习(ML), 自然语言处理(NLP), 信息检索(IR)等领域, 评估(E ...

IDEA中Gradle插件的使用

Idea本身已经集成了Gradle插件,你可以在File | Settings | Build, Execution, Deployment | Build Tools | Gradle 下找到 相关 ...