自定义属性data-data options属性怎么用

来源：蜘蛛抓取(WebSpider) 时间：2016-06-12 05:38 标签： div data options
easy-ui里面的data-options自定义属性
[问题点数：40分，结帖人llyishi]
easy-ui里面的data-options自定义属性
[问题点数：40分，结帖人llyishi]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2016年2月 总版技术专家分月排行榜第二2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
优秀小版主2015年7月优秀小版主2015年9月优秀小版主2015年5月优秀小版主2014年11月论坛优秀版主
本帖子已过去太久远了，不再提供回复功能。HTML中data自定义属性的使用和插件应用介绍
作者：佚名
字体：[ ] 来源：互联网 时间：05-02 18:15:01
大家可能会经常看到一些HTML里都带有data属性，这些都是HTML5的自定义属性，下面为大家简单介绍一下使用方法，希望对你有所帮助
大家可能会经常看到一些HTML里都带有data属性，这些都是HTML5的自定义属性，可以做很多事情，直接调用JS十分方便，虽然是HTML5的属性，但好在jQuery通用的，所以基本在所有浏览器里都是可以正常使用的，包括低版本的IE。下面为大家简单介绍一下使用方法： 1、简单使用 代码如下: &div id="widget" data-text="123456"&&/div& 代码如下: $(function(){ var _widget= $("#widget").attr("data-text"); 　　alert(_widget);//因为data-text="123456"，所以打印出123456 }) 2、配合$.fn.extend使用，编写插件 代码如下: &div id="widget" data-widget-config="{effect:'click'}"&这里是测试区域&/div& 代码如下: //插件扩展部分 ;(function($){ $.fn.extend({ Test:function(config){ /** * @param effect 效果 * config||{} 当有自定义属性传进来时不执行默认值 */ // 设置默认值 config=$.extend({ effect:'click', },config||{}); var effect=config. var _text=config._ if(effect=='click'){ $(this).click(function(){ alert('this click'); }) }else if(effect=='mouseover'){ $(this).mouseover(function(){ alert("this is mouseover"); }) } } }) })(jQuery) 代码如下: //调用部分，HTML中的data属性依赖于此 $(function(){ var _widget= $("#widget").attr("data-widget-config"); // 将string转换成json对象的方法，有两种 var widgetConfigJSON=eval("("+_widget+")"); // var widgetConfigJSON = (new Function("return " + _widget))(); $("#widget").Test(widgetConfigJSON); 　　//因为HTML中data属性是data-widget-config="{effect:'click'}"，所以这里会调用点击事件， 　　如果是data-widget-config="{effect:'mouseover'}",则调用鼠标移上去的事件})
大家感兴趣的内容
12345678910
最近更新的内容HTML5 增加了一项新功能是 自定义数据属性 ，也就是 data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性，来进行一些数据的存放，
// 使用getAttribute获取 data- 属性
var user = document . getElementById ( 'user' ) ;
var userName = plant . getAttribute ( 'data-uname' ) ; // userName = '速梦达工作室'
var userId = plant . getAttribute ( 'data-uid' ) ; // userId = '12345'
// 使用setAttribute设置 data- 属性
user . setAttribute ( 'data-site' , ' ) ;
这种“原始”的自定义属性和上面 data-* 自定义属性没什么区别，知识属性名不一样。
dataset属性存取data-*自定义属性的值
这种方式通过访问一个元素的 dataset 属性来存取 data-* 自定义属性的值。这个 dataset 属性是HTML5 JavaScript API的一部分，用来返回一个所有选择元素 data- 属性的DOMStringMap对象。
使用这种方法时，不是使用完整的属性名，如 data-uid 来存取数据，应该去掉data- 前缀。
还有一点特别注意的是： data- 属性名如果包含了连字符，例如：data-date-of-birth ，连字符将被去掉，并转换为驼峰式的命名，前面的属性名转换后应该是： dateOfBirth 。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：98215次
积分：1677
积分：1677
排名：第16160名
原创：69篇
转载：19篇
评论：34条
(1)(3)(1)(1)(2)(1)(1)(4)(1)(2)(3)(8)(3)(3)(1)(1)(1)(2)(2)(1)(2)(7)(5)(2)(2)(2)(1)(10)(1)(2)(1)(1)(1)(3)(2)(1)(1)(2)> 张鑫旭-鑫空间-鑫生活" />
HTML5自定义属性data与CSS3样式控制 >> 张鑫旭-鑫空间-鑫生活
HTML5自定义属性data与CSS3样式控制实例页面
.mm{width:256 height:200}
.mm[data-name='张含韵']{background:url(/image/study/s/s256/mm1.jpg) no-}
.mm[data-name='undefined']{background:url(/image/study/s/s256/mm3.jpg) no-}
HTML代码：
&div class="mm" data-name="张含韵">&/div>
&div class="mm" data-name="undefined">&/div>

我要回帖

更多关于 div data options 的文章

 

随机推荐