文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

HTML5怎么自定义data-* data(obj)属性和jquery的data()方法

2024-04-02 19:55

关注

本篇内容介绍了“HTML5怎么自定义data-* data(obj)属性和jquery的data()方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

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

代码如下:


<div data-role="header">
   <h2>我是</h2>
</div>


通过手机浏览,效果如下:

HTML5怎么自定义data-* data(obj)属性和jquery的data()方法HTML5怎么自定义data-* data(obj)属性和jquery的data()方法

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

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

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

代码如下:


<body>
 <div data-chb="header">
   <h2>我是使用了data-chb自定义属性的div</h2>
 </div>
 <br/>
 <div>
   我没有使用data-chb自定义属性,该怎么展现就怎么展现;
 </div>
</body>


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

代码如下:


<style>
.ui_header {
 background-color: black;
 text-align: center;
 color:white;
 border:1px solid #000;
}
</style>


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

代码如下:


     <script type="text/javascript">
     window.onload=function(){
       var elems = document.getElementsByTagName("div");
       if(elems!=null&&elems.length>0){
         var length = elems.length;
         //遍历所有DIV控件
         for(var i=0;i<length;i++){
           var elem = elems[i];
           //获取该控件的自定义属性
           var customAttr = elem.dataset.chb;
           //也可以通过如下方式获得自定义属性
           //var customAttr = elem.dataset["chb"];
           //如果是我们预先定义好的header值,表示需要处理
           if(customAttr=="header"){
             //添加样式
             elem.setAttribute("class","ui_header");
           }
         }
       }
     }
   </script>


最后页面显示效果如下:

HTML5怎么自定义data-* data(obj)属性和jquery的data()方法

人们总喜欢往HTML标签上添加自定义属性来存储和操作数据。但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用。这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情。

你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。
下面的一个代码片段是一个有效的HTML5标记

代码如下:


<div id="awesome"
data-myid="3e4ae6c4e">Some awesome data</div>


可是,怎么来读取这些数据呢?你当然可以遍历页面元素来读取你想要的属性,但jquery已经内置了方法来操作这些属性。使用jQuery的.data()方法来访问这些"data-*" 属性。其中一个方法就是 .data(obj),这个方法是在 jQuery1.4.3版本后出现的,它能返回相应的data属性。
举个例子,你可以用下面的写法读取 data-myid属性值:

代码如下:


var myid= jQuery("#awesome").data('myid');


console.log(myid);你还可以在"data-*" 属性里使用json语法,例如,如果你写出下面的html:

代码如下:


<div id="awesome-json" data-awesome='{"game":"on"}'></div>


你可以通过js直接访问这个数据,通过json的key值,你能得到相应的value:

代码如下:


var gameStatus= jQuery("#awesome-json").data('awesome').game;


console.log(gameStatus);你也可以通过.data(key,value)方法直接给"data-*" 属性赋值。一个重要的你要注意的事情是,这些"data-*" 属性应该和它所在的元素有一定的关联,不要把它当成存放任意东西的存储工具。
译者补充:尽管"data-*" 是HTML5才出现的属性,但jquery是通用的,所以,在非HTML5的页面或浏览器里,你仍然可以使用.data(obj)方法来操作"data-*" 数据。

“HTML5怎么自定义data-* data(obj)属性和jquery的data()方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯