H5中如何获取和设置自定义属性

给元素自定义属性是在HTML5中新加入的一个特性。简单来说,自定义数据属性规范规定任何以data-开头属性名并且赋值。自定义数据属性是为了保存页面或者应用程序的私有自定义数据,这些自定义数据属性保存进DOM中,对于整个DOM的布局和表现无任何影响,但是却可以方便操控整个网页的交互以及想要表达的效果。
   比如我们通过一个对象得到了某个地区所有的城市,但是呢,我们还需要得到城市的其他信息以方便接下来的操作,我们就可以在这个城市的标签中添加一个自定义属性,用来存放这个地区的其他信息,操作的时候直接通过我们设置的属性名拿值即可,可以很大空间的提升我们和计算机的操作量。
   往属性里面存值的时候注意一定是字符串或者,所以需要存的数据是一个对象的时候,记得转化成字符串

var cityStr = JSON.stringify(cityObj);

登录后复制

对于数据属性值的获取和设置,JQ提供了两种方法attr()data()
这两种方法,当只传递一个参数时,这个参数时属性名,是获取该属性的值,
           当传递两个参数时,是设置属性名,属性值

 $(selector).attr(attribute,value)

登录后复制

下面是用data来实现存取自定义属性的小案例:

登录后复制

以上就是H5中如何获取和设置自定义属性的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2909634.html

(0)
上一篇 2025年3月11日 04:23:55
下一篇 2025年3月11日 04:24:00

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • HTML5的data-*自定义属性是什么

    HTML5的data-*自定义属性 html5增加了一项新功能是自定义数据属性,也就是data-*自定义属性。在html5中我们可以使用以data-为前缀来设置我们需要的自定义属性,来进行一些数据的存放。当然高级浏览器下可通过脚本进行定义和…

    编程技术 2025年3月11日
    200
  • html5在Canvas中实现自定义路径动画详解

    本篇文章主要介绍了html5如何在canvas中实现自定义路径动画示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在最近的项目中笔者需要做一个新需求:在canvas中实现自定义的路径动画。这里所谓的自定义路径不单单包括一条直线,也许…

    2025年3月11日
    200
  • html5 canvas中绘制字体与图片以及图形模糊问题解决

    html5 canvas 绘制字体、图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑。当然很多高端台式电脑也有高分辨率高dpi的显示器。   canvas在浏览器中的缩放原理 立即学习“前…

    编程技术 2025年3月11日
    200
  • Html5中内容安全策略(CSP)

    前言: Cordova不支持内联事件,所以点击事件必须提取到js里面.以下是从官网摘抄下来,希望对您有所帮助 登录后复制 为了缓解大量潜在的跨站点脚本问题,chrome的扩展系统已经纳入了内容安全策略(csp)的一般概念。 这引入了一些相当…

    编程技术 2025年3月11日
    200
  • h5头像图片旋转css3精确控制每个图片的位置

    h5头像图片旋转css3精确控制每个图片的位置: 1.下面是需要的效果图: 2.用到的图片有:                                         @@##@@                          …

    2025年3月11日 编程技术
    200
  • html5制作新增的定时器requestAnimationFrame实战进度条

    在requestanimationframe出现之前,我们一般都用settimeout和setinterval,那么html5为什么新增一个requestanimationframe,他的出现是为了解决什么问题? 优势与特点: 1)requ…

    2025年3月11日
    200
  • HTML5标签选择方法指引

    以上就是HTML5标签选择方法指引 的详细内容,更多请关注【创想鸟】其它相关文章!

    2025年3月11日
    200
  • html5开发中viewport进行屏幕适配

    随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择。然而,每一款手机有不同的分辨率,不同屏幕大小,如何使我们开发出来的应用或页面大小…

    编程技术 2025年3月11日
    200
  • H5 语义化标签介绍

    H5新标签—-语义化标签 区别:1.默认样式不一样 2.有SEO优化作用 1、header,一般作为网页的头部使用 2、aside,侧边栏 3、nav,导航栏 4、address,地址,字体样式默认倾斜 标签定义文档或文章的作者…

    编程技术 2025年3月11日
    200
  • HTML5头部 meta介绍

    用于定义页面元信息,定义元信息也就是指定一些name-value对。该元素除了可以指定id属性外,还可以指定如下三个属性: http-equiv:指定元信息名称,该属性指定的名称具有特殊意义,它可以向浏览器传回一些有用的信息,帮助浏览器正确…

    编程技术 2025年3月11日
    200

发表回复

登录后才能评论