JS day30 获取设置自定义属性值

最新推荐文章于 2022-06-04 12:04:13 发布
最新推荐文章于 2022-06-04 12:04:13 发布
阅读量158 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34620296/article/details/101315497
版权

一.自定义属性的目的:

1.为了使用并保存数据,有些数据可以保存到页面而不保存到数据库中.
2.自定义属性是通过getAttribute(‘属性’)获取.
3.但是有些自定义属性很容易引起歧义,不容易判断是内置属性还是自定义属性.

    <script type="text/javascript">
        //一.获取属性值
        window.onload=function(){
            
            var div=document.querySelector('div');
            div.id;    //方法1.element.属性  获取内置属性(元素本身自带)           
            div.getAttribute('id');
            div.getAttribute('index'); //方法2.element.getAttribute('属性');  主要获得自定义属性
        
        //二.设置属性值
            div.id='test';  //方法1.设置内置属性值
            div.setAttribute('index',2);  //方法2.主要用于自定义属性值
            div.setAttribute('class','foots');  //也可修改本身属性
            div.removeAttribute('id');  //移除属性
        }  
    </script>

<body>
    <div id="doem" index="1" class="foot"></div>   
</body>

二.设置H5自定义属性

H5规定自定义属性以data-开头作为属性名并且赋值
1.设置自定义属性

	<div data-index="1"></div>  
	var div=document.querySelector('div');
	div.setAttribute('date-index','20');

2.获取自定义属性值

        div.getAttribute('date-index') //兼容
        div.dataset.index;  //新增 ie11以上,dataset是一个集合,里面存放所有date自定义属性
        div.dataset['index'];  //新增

3.如果自定义属性有多个-,采用驼峰命名法获取

        div.dataset.listName;
        div.dataset['listName'];

<body>
    <div data-index="1" data-list-name='andy'></div>
</body>
肝JOJO
关注
专栏目录
JS数据类型之布尔值(boolean) 数组 自定义对象 运算符 流程控制 函数 JS内置对象 BOM和DOM操作
Yydsaoligei的博客
08-25 2194
JS数据类型之布尔值(boolean) 数组 自定义对象 运算符 流程控制 函数 JS内置对象 BOM和DOM操作
day01 -Web API介绍—DOM 介绍—获取元素—事件基础—操作元素—排他操作—自定义属性操作—节点操作—案例：动态生成表格—创建元素的三种方式（经典面试题）
小琳爱分享的博客
08-04 551
day01 -Web API介绍—DOM 介绍—获取元素—事件基础—操作元素—排他操作—自定义属性操作—节点操作—案例：动态生成表格—创建元素的三种方式（经典面试题）
用javascript获取自定义属性
weixin_48047636的博客
04-27 4114
<body> <div id="demo" index="zhu" class="nav"></div> <script> //先获取属性值 var div_js=document.querySelector("div"); //用element获取div里面的元素属性id 直接console element.属性 //语法:element.属性 console.l
原生js 获取自定义属性
weixin_46352937的博客
06-04 3025
原生js 获取自定义属性的两种方法
JavaScript - 操作元素 - 获取自定义属性值
qq_33962481的博客
06-22 7798
文章目录一、定义属性的操作1.获取属性值2.设置元素属性值3. 移除属性 一、定义属性的操作 二 选项卡案例 三 h5自定义属性
【JS】设置、获取、删除标签属性以及H5自定义属性
热门推荐
m0_48982503的博客
01-14 1万+
使用setAttribute()('属性名', '属性值')方法可以添加、修改、删除属性。 使用getAttribute(‘属性名')方法获取标签的属性 使用removeAttribute('属性名')方法删除标签的属性 自定义属性的目的：是为了保存和使用数据，有些数据可以保存到页面中而不用保存到数据库中 自定义属性获取是通过 getAttribute(‘属性’) 方法获取 但是有些自定义属性很容易引起歧义，不容易判断到底是元素内部的属性还是自定义属性 H5中新增了标准
js中获取自定义属性的方法
weixin_46421045的博客
06-10 593
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul> <li
day44-Custom Range Slider（自定义范围滑块）
最新发布
07-28
这里，`id`属性用于后续的CSS和JavaScript选择器，`min`和`max`定义了滑块的范围，而`value`表示初始位置。 接下来，我们使用CSS来美化这个滑块。CSS允许我们自定义滑块的外观，包括轨道、拇指（滑块的小圆点）和...
一些不错的JS 自定义函数第1/2页
10-29
以下是一些实用的JS自定义函数示例，这些函数在许多网站中都有应用，值得学习和掌握。 1. **dayin() 函数** 这个函数用于解决打印网页中特定内容的问题。它通过获取id为"dayin"的元素内容，创建一个新的窗口，并...
Day06_动态组件_插槽_自定义指令_tabbar案例(1).pdf
05-03
在Day06的学习中，我们将深入探讨动态组件、插槽以及自定义指令，并通过一个tabbar案例进行实战练习。 首先，让我们详细了解动态组件。动态组件是通过Vue内置的`<component>`组件和`:is`属性来实现的。`:is`属性...
JavaScript中如何自定义属性操作
...
08-25 619
自定义属性操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <tit
判断多个节点自定义属性值是否一样
weixin_30786657的博客
08-10 173
考虑到页面可能引入jquery，也加了判断。 封装了一个dataAttr函数，需要传入两个参数。 第一个参数：装有节点的数组或者伪数组，来判断这些数组的某个自定义属性值是否一致。 第二个参数：自定义属性。 返回值：true || false 。 上源码： 0 <!DOCTYPEhtml> 1 <htmllang="en"> ...
JPA query 基本语法解释
weixin_33726313的博客
05-24 637
详细语法官网去学习 --&gt;&gt; http://docs.spring.io/spring-data/jpa/docs/current/reference/html/#reference                                  摘抄2018.02.19版本: http://www.cnblogs.com/wangdaijun/p/8482073.html Quer...
js获取当前点击的div的自定义属性
weixin_34309269的博客
02-25 3684
js获取当前点击的div的自定义属性 HTML结构如下： <div class="content-left-nav"> <div data-value="1" class="active-yscy-left">能源工业</div> <div data-value="2" class="">石油化工</div> <div data-value="3" class="">有色冶金</div>
JS设置前后7、30天（前n天，当前，后n天）
weixin_41760500的博客
10-08 1224
在项目中，有时候需要查询一段时间以内的订单。为了方便用户快速选择时间区域，并写了这个需求，格式 为：YY-MM-DD hh:mm:ss function getBeforeDate(n){//n为你要传入的参数，当前为0，前一天为-1，后一天为1        var date = new Date() ;       var year,month,day ;       date.setDa...
js获取自定义属性的元素及获取相应的子元素
weixin_43861630的博客
04-03 868
亲测有效 formIdList.forEach((item,index) =>{ var div_ly = document.querySelector("div[packitemid='"+item+"']"); $(div_ly).find("#ssuo").val(shuzhi1); $(div_ly).fi...
原生JS添加设置和获取自定义属性 Jquer获取自定义属性
MagicWing的博客
10-12 1009
Jquery 获取自定义属性 注意 h5操作的是DOM， 设置属性后可以直接显示，但内存中是不变的，而是新开内存 Jquery 操作ode是内存，是直接修改内存自定义属性 ...
JS 59 筋斗云案例
qq_34620296的博客
11-07 599
一.需求分析: 1.鼠标经过某个li,筋斗云跟着到当前位置 2.鼠标离开某个li,筋斗云复原为原来位置 3.鼠标点击某个li,筋斗云停留在这个li 效果展示: 二.实现思路: 1.利用动画函数做动画效果 2.原来筋斗云起始位置为0 3.鼠标经过某个li,把当前li的offsetLeft作为动画函数的目标值即可 4.鼠标离开li时,把目标设...
JavaScript对象属性与方法详解
- b) `new Date(milliseconds)` 设置对象值为指定的毫秒数。 - c) `new Date(string)` 使用特定的时间字符串，遵循`Date.parse()`方法解析格式。 - d) `new Date(year, month, day, hour, minute, second, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值