h5自定义对象

最新推荐文章于 2022-09-18 22:26:31 发布
最新推荐文章于 2022-09-18 22:26:31 发布
阅读量322 收藏
点赞数
分类专栏： Web 文章标签： html5 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24033577/article/details/105260321
版权

一、方式一

在很早以前我们自定义元素的属性要通过 user-defined-attribute="value"的方式来设置自己需要的属性

设置自定义属性

<h1 user-defined-attribute="share">杭城小刘</h1>

获取自定义属性

document.getElementsByTagName("h1")[0].getAttribute("user-defined-attribute")

二、方式二

现在H5为我们提供了一个data属性 **“data-” **作为前缀，可以让所有的HTML元素都支持自定义的属性，只要在标签里面以 "data-"

为前缀定义需要的属性即可

设置自定义属性

<h1 data-share="true">杭城小刘</h1>

获取自定义属性（使用H5自定义属性对象Dataset来获取）

var myDiv = document.getElementsByTagName("h1")[0];
var theValue = myDiv.dataset;    //DOMStringMap对象

document.getElementsByTagName("h1")[0].dataset.share
document.getElementsByTagName("h1")[0].dataset["share"]

document.getElementsByTagName("h1")[0].getAttribute("data-share")

DOMStringMap是HTML5一种新的含有多个名-值对的交互变量

三、H5 dataset的操作

删掉一个data属性

delete myDiv.dataset.share

增加一个属性

myDiv.dataset.happy="ok"

四、dataset兼容性处理

如果不支持dataset，有必要做一下兼容性处理

<script>
    if (myDiv.dataset) {
        myDiv.dataset.sad = "false";
        var thevalue = myDiv.dataset.sad;
    } else {
        myDiv.setAttribute("data-attribute", "sad");
        var theValue = myDiv.getAttribute("data-attribute"); // 获取自定义属性
    }
</script>

做一个实验：

<!DOCTYPE html>
<html>

<head>
    <title>我的标题</title>
    <meta charset="utf-8" />
</head>

<body>
    <h1 data-share="true">杭城小刘</h1>
</body>
<script>
    console.log(document.getElementsByTagName("h1")[0].getAttribute("user-defined-attribute"));
</script>

</html>

然后利用chrome调试，在console命令行分别输入3条指令，结果如下图
实验结果
可以看出来，dataset后跟的属性是驼峰命名原则，如果多个单词第二个单词首字母需要大写，检查元素可以看到神奇的变化。

FantasticLBP
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5创建对象的方法,JS创建对象（3种方式）
weixin_33484805的博客
06-21 600
在 JavaScript 中创建对象的方式有 3 种，简单介绍如下。构造对象使用 new 运算符调用构造函数，可以构造一个实例对象。具体用法如下：var objectName = new functionName(args);参数说明如下：objectName：返回的实例对象。functionName：构造函数，与普通函数基本相同，但是不需要 return 返回值，返回实例对象，在函数内可以使用 ...
[H5]Javascript对象
Gamin
03-25 1105
[H5]Javascript对象内容包括：自定义对象、String对象、Date对象、Array对象、Math对象、DOM对象、Window对象（History对象、Location对象、Screen对象）。[index.html]&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-...
自定义H5页面规范
weixin_34342207的博客
05-05 213
查看详情页也可支持自定义H5页面，用来展示更多内容。 交互规范 分屏切换，支持横向和竖向，滑动指引需清晰 若详情页加载较慢，需设计loading页，给予用户友好的提示 如有视频，需在底部加上“建议在Wi-Fi环境下播放”提示 建议一个页面不超过两种以上交互操作 设计规范 页面尺寸建议：640像素×1100像素 最小按钮宽度：160像素 最小按钮高度：60像素 页面最...
关于H5自定义属性
xiaoxu的博客
08-28 1128
[toc] 今天做步步高公司的校招Web前端面试题，考到了H5中的自定义属性。说实话真的一脸懵逼，啥是自定义属性？？？？其实这个自定义属性以前做项目用框架时经常见到，但是并没有去了解。 自定义属性的存在形式 其实就是HTML标签中的data-*属性 作用 自定义数据属性是为了保存页面或者应用程序的私有自定义数据，这些自定义数据属性保存进DOM中，对于整个DOM的布局和表现无任何影响，...
[H5]Javascript面向对象
Gamin
03-25 481
[H5]Javascript面向对象 JS中一切事物都是对象，对象具有封装和继承特性，类信息能够隐藏（包括属性与方法）。/** * 创建对象 */ var city = {name:"chongqing",area:"8.24万平方千米",management:function () { alert("nanagement") }}; alert(city.name); /** *...
烟花绽放h5源码,可以自定义内容
03-08
本篇将详细讲解一款名为“烟花绽放”的H5源码，它允许用户自定义内容，从而创造出个性化的烟花展示效果。我们将探讨其核心技术和实现原理。 一、HTML5结构基础 HTML5是HTML的最新版本，它引入了新的元素，如`...
H5player-2.1.2
12-29
3. 初始化播放器：在JavaScript中，通过new H5Player()创建播放器实例，传入配置对象，完成播放器的初始化。 4. 使用API：通过H5player提供的API，可以实现播放、暂停、改变音量、获取播放状态等操作，进一步增强...
自定义大转盘抽奖游戏源码h5源码
10-23
【自定义大转盘抽奖游戏源码H5源码】是一种常见的互动娱乐工具，常用于线上活动或营销推广，让用户参与抽奖，增加用户参与度和趣味性。此源码允许开发者根据自己的需求进行定制，例如调整奖品名称和数量，以适应不同...
炫酷抽奖H5+canvas自动渐变色背景，吃饭菜单的一个抽奖，可以自定义选项
08-13
开发者可能会使用`createLinearGradient`或`createRadialGradient`方法创建渐变对象，然后设置不同的颜色停止点，最后将这个渐变应用到Canvas的fillStyle或strokeStyle上，使得背景或绘制的元素呈现出渐变效果。...
友盟分享自定义分享界面
12-19
例如，创建一个`ShareContent`对象，设置分享内容，然后通过`UMSocialService`进行分享： ```java ShareContent shareContent = new ShareContent(); shareContent.setTitle("分享标题"); shareContent.setText...
html5创建对象的三种方式
TimyChen的博客
01-04 1597
创建对象有很多种方法，最常用的有直接创建对象、使用对象字面量、为对象添加方法等。 直接创建对象： example var myData=new Object(); myData.name="Marry"; myData.feel="love"; document.writeln("hello "+myData.name+"."); document.w
HTML5中引入JS
天高任鸟飞
07-28 9962
在页面中引入JS &lt;script src="jquery-1.10.2.min.js" type="text/javascript"&gt;&lt;/script&gt; HTML5中引入JS &lt;script src="jquery-1.10.2.min.js"&gt;&lt;/script&gt; 直接引用，不需要使用type属性 JavaScript是
HTML5基础28----创建对象仓库
翟浩浩Android专栏
07-27 662
html> lang="en"> charset="UTF-8"> window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; if (!window.indexedDB) {
一个简易的DIY场景H5框架
weixin_34329187的博客
04-15 880
第一次发项目，以供大家学习参考，可能有些简陋，若有不合理处，请大神们指教。 最近在朋友圈出现了很多DIY类的H5游戏，通过添加拖拉摆放和组合元素，来DIY自定义一个场景并合成图片分享出去的新H5展示形式。笔者也用操作DOM的形式做了一个类似项目，现在整合成一个简易的框架分享给大家，只需要根据自己的需要完成布局与样式的编写，以及按下面指示操...
H5自定义属性的获取方式以及dataset
一个小白，博文源于浏览各个大佬所得，感谢行业大佬们！
09-18 621
H5自定义属性的获取方式以及dataset
HTML5新特性dataset的使用方法
EmotionComputer
10-21 2784
这篇文章主要介绍了HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性),需要的朋友可以参考下: HTML5规定可以为元素添加非标准的属性，但要添加前缀 data- ，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以 data- 开头即添加了自定义属性之后，可以通过元素的 dataset 属性来访问自定义属性的值。 <!DOCTYPE html> <html lang="en"> <head> &.
HTML5 新特性 dataset
alokka的博客
03-31 1649
在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放。 <div data-id="test">test</div> 这里的data-前缀就被称为data属性 ;我们可以通过dataset来获取data属性。下面是两个例子： 例1： <body> <div id="div1" data-index="0" data-a="牛啊牛啊">test1</div> <div id="div2" data-i
H5自定义属性
weixin_59179354的博客
04-16 1801
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不保存到数据库中。 自定义属性获得是通过getAttribute('属性')获得，但有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。 h5新增了自定义属性：规定自定义属性date-开头作为属性名并赋值。 比如<div date-index='1'></div> 或者通过js设计 element.setAttribute('date-index',2) ...
uniapp实现自定义相机
最新发布
02-22
UniApp是一个基于Vue.js的跨平台开发框架，可以用于开发iOS、Android、H5等多个平台的应用程序。要实现自定义相机功能，可以使用uni-app提供的原生插件和API来调用设备的相机功能。 以下是一种实现自定义相机的方法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值