data属性(The Data Attribute)
HTML片段
<div id="myDiv" data-custom-attr="My Value"> 巴拉巴拉,lady 嘎嘎 </div>
检索自定义属性的价值
var theDiv = document.getElementById('myDiv');
var attr = theDiv.getAttribute('data-custom-attr');
alert(attr); // My Value
此属性还可以用在CSS中,例如下面这个有些傻里傻气的CSS文字改变的例子:
CSS代码:
.data_custom { display:inline-block; position: relative; }
.data_custom:hover { color: transparent; }
.data_custom:hover:after {
content: attr(data-hover-response);
color: black;
position: absolute;
left: 0;
}
HTML代码: <a class="data_custom" data-hover-response="我说过不要碰我!" href="#">不要碰我,雅蠛蝶~~</a>
data属性(The Data Attribute)的更多相关文章
- jquery easyui ajax data属性传值方式
$.ajax({ url:url, type:'post', data:data, dataType:'json', contentType: "application/ ...
- HTML 5:你必须知道的data属性
原文:All You Need to Know About the HTML5 Data Attribute 译文:你必须知道HTML 5 的Data属性 译者:dwqs HTML 5的Data属性可 ...
- JS组件系列——使用HTML标签的data属性初始化JS组件
前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里 ...
- 【wpf】Path画扇形以及Path的Data属性的理解
<Path x:Name="PathFillColor" Fill="{TemplateBinding Property=Button.Background}&qu ...
- HTML data属性简介以及低版本浏览器兼容算法
实例 使用 data-* 属性来嵌入自定义数据: <ul> <li data-animal-type="bird">Owl</li> <l ...
- data属性
本框架内置组件以及部分插件可以通过data属性来初始化并使用,通常通过data-toggle来调用API(toggle是触发器的意思,例如我们创建一个navtab标签可以通过为a的data-toggl ...
- Intent的属性及Intent-filter配置——实例Action、Data属性启动系统Activity
一旦为Intent同时指定了Action.Data属性,那么Android将可根据指定的数据类型来启动特定的应用程序,并对指定数据类型执行相应的操作. 下面是几个Action属性.Data属性的组合. ...
- Bootstrap入门(二十四)data属性
Bootstrap入门(二十四)data属性 你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码.这是 Bootstrap 中的一 ...
- ajax data属性传值的方式总结
在和后台同事对接口的时候,有一个小问题一直困扰着我.那就是用ajax请求后台接口数据,需要用data属性传值的时候,data属性传值的方式感觉没有统一用一种方式. 后来仔细想想,其实哪种方式都可以,主 ...
随机推荐
- Maven私服仓库类型
1. 代理仓库(Proxy Repository) 顾名思义是代理第三方仓库的,如: maven-central nuget.org-proxy 版本策略(Version Policy): Relea ...
- 转载:“error LNK1169: 找到一个或多个多重定义的符号”的解决方法
转载来自:http://www.cnblogs.com/A-Song/archive/2012/03/23/2413782.html 问题描述如下: 有 三个源文件,A.h.B.cpp.C.cpp. ...
- java json字符串与对象转换
下载引入包gson-2.0.jar 1.字符转数据 final Map map = new HashMap();map.put("contents", "[{\&q ...
- ORM 的基本操作
https://www.cnblogs.com/sss4/p/7070942.html
- Netty - 2
参考:Scalable IO in Java - http://gee.cs.oswego.edu/dl/cpjslides/nio.pdf mainReactor负责处理客户端的连接请求,并将acc ...
- 新装kafka与zookeeper配置
zookeeper配置 dataDir=/opt/kafka_2.11-2.0.0/data/zookeeper # 尽量不要放在tmp# the port at which the clients ...
- vue:一个vue可以使用的视频插件
网址:https://www.jianshu.com/p/e8e747e33ef0 1:安装依赖 npm install vue-video-player -S 2:引入配置(main.js) imp ...
- 使用大于16TB的ext4文件系统
我们的电脑想要快速开机,需要具备三个条件:第一是主板支持UEFI,二是系统支持UEFI(Win8),最后就硬盘需要采用GPT分区. GPT分区全名为Globally Unique Identifier ...
- Unity 菜单拓展
添加自定义菜单项 [MenuItem("test/item1 %g")] public static void haha() { Debug.Log("this is a ...
- avalon2学习教程01
经过难苦奋战,avalon2终于面世了.这花了大半年时间,其中1.6还胎死腹中.长达半年没有产出,我都担心自己会被裁掉…… avalon2许多API与1.4.×保持一致,当然也添加了一些1.5的功能, ...