JS获取元素属性和ES6获取自定义属性

最新推荐文章于 2023-02-22 15:05:40 发布
最新推荐文章于 2023-02-22 15:05:40 发布
阅读量1.8k 收藏
点赞数
分类专栏： h5、webApp Javascript
原文链接：https://blog.csdn.net/qq_24147051/article/details/77976844
版权

获取元素的属性分为两种类型：

1. 获取和设置元素常见的属性（class,id,type,value…）

//js
  设置属性 .setAttribute("属性","值")
  获取属性 .getAttribute("属性")
//jQuery
  设置属性 .attr("属性","值")
  获取属性 .attr("属性")

2. 获取自定义的元素的属性（data-value,data-mess…）

<!DOCTYPE html>
<html> 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>获取元素属性</title>
        <style>
            * {
                margin:0;
                padding:0;
                list-style:none;
            }
        </style>
    </head>
     
    <body>
        <div id="mayouchen">
            <div style="background:red;height:20px">元素属性获取</div>
            <div class="test1">
                <p id="demo">点击按钮来设置按钮的 type,id,class 属性。</p>
                <input value="OK" class="mayouchen">
                <button onclick="mayouchen1()">获取元素属性</button>
            </div>
            <div style="background:green;height:20px">自定义属性获取</div>
            <div class="test2">
                <div id="tree" data-leaves="47" data-plant-height="2.4m">我是被获取的元素</div>
                <button onclick="mayouchen2()">获取自定义元素属性</button>
            </div>
        </div>
        <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
        <script>
            $(function() {
 
            });
 
            function mayouchen1() {       //常见属性的设置和获取
                document.getElementsByTagName("INPUT")[0].setAttribute("type", "button");
                document.getElementsByTagName("INPUT")[0].setAttribute("class", "mayouchen");
                document.getElementsByTagName("INPUT")[0].setAttribute("id", "test1");
 
                document.getElementsByTagName("INPUT")[0].getAttribute("id");
                document.getElementsByTagName("INPUT")[0].getAttribute("class");
 
            }
 
            function mayouchen2() {     //自定义属性的设置和获取
                var tree = document.getElementById("tree");
                //getAttribute()取值属性
                console.log("data-leaves======" + tree.getAttribute("data-leaves"));
                console.log("data-plant-height===============" + tree.getAttribute("data-plant-height"));
 
                //setAttribute()赋值属性
                tree.setAttribute("data-come", "49");
 
                //data-前缀属性可以在JS中通过dataset取值，更加方便
                console.log("通过dataset获得data-leaves====" + tree.dataset.leaves);
                console.log("通过dataset获得data-plant-height====" + tree.dataset.plantHeight);
 
                //注意在这里连字符的访问时，属性要写成驼峰形式
            }
        </script>
    </body>
 
</html>
摇摇奶昔x
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS对象属性的检测与获取操作实例分析
10-15
主要介绍了JS对象属性的检测与获取操作,结合实例形式分析了JS针对ES5、ES6实现对象属性的检测与获取常见操作技巧,需要的朋友可以参考下
【前端基础】21.ES6-ES11新特性
menghen113的博客
03-03 603
ES6-ES11新特性
ES6学习
qq_41547609的博客
11-29 1240
1 ES6 新特性 1.1 let 关键字 let 关键字用来声明变量，使用 let 声明的变量有几个特点： 不允许重复声明； 块级作用域（局部变量）； 不存在变量提升； 不影响作用域链； let创建变量代码示例： // let关键字使用示例： let a; // 单个声明 let b,c,d; // 批量声明 let e = 100; // 单个声明并赋值 let f = 521, g = 'iloveyou', h = []; // 批量声明并赋值 块级作用域 不仅仅指花括号{}，还有if
ES6的属性及方法
m0_61235042的博客
08-08 670
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言
ES6类的属性自定义存取值——getter、setter访问器理解
qq_41619567的博客
11-06 592
get关键字特性 get关键字可在对象内部使用，可为此对象创造一个伪属性。先看下面一个例子: let obj = { get name(){ let a =10; return a; } } console.log(obj.name); //10 ...
ES6基础语法---对象解构(传统语法获取属性值和ES6语法获取属性值)
睡不醒的每天
09-22 1815
## 传统语法获取属性和方法的两种写法 ### 1、对象.属性获取属性值 和 对象.方法获取方法体 ```java var user={ name:'hyh', age:30, add:function(){ console.log("我会好好学习！！！"); } }; //通过对象.属性调用属性值 console.log(user.name);//输出hyh //通过对象.方法调用方法体 console.log(user.age)//30 console.log(
树结构数据父节点获取所有子节点的id
baidu_30907803的博客
09-28 7383
使用 $scope.getGroupLevel($scope.meetingGroupData); 递归处理数据 //获取会议室分组的所有下属节点的id $scope.getGroupLevel = function (meetingGroupData){ if(meetingGroupData != undefined &amp;&amp; meetingGr...
ES6--class类（详解/看完必会）
蜗牛~~
02-22 7322
ES6中class类的学习，看完必会
ES6 javascript中class静态方法、属性与实例属性用法示例
10-19
主要介绍了ES6 javascript中class静态方法、属性与实例属性用法,结合实例形式分析了ES6中类的静态方法、静态属性概念、功能、使用方法与相关注意事项,需要的朋友可以参考下
es6函数name属性功能与用法实例分析
10-15
主要介绍了es6函数name属性,结合实例形式分析了es6函数name属性基本原理、功能、用法及操作注意事项,需要的朋友可以参考下
ES6 Object属性新的写法实例小结
10-16
主要介绍了ES6 Object属性新的写法,结合实例形式总结分析了ES6中object属性的常见简化写法,需要的朋友可以参考下
ES6 Class中实现私有属性的一些方法总结
10-16
主要给大家介绍了关于ES6 Class中实现私有属性的一些方法，文中通过示例代码介绍的非常详细，对大家学习或者使用ES6具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Web API(ES6新增JS语法、获取元素修改属性、监听事件）
m0_59592734的博客
04-29 1389
内部Javascript：直接写在html文件离script标签写在</body>里面 外部JavaScript：代码写在以.js结尾的文件里 语法：通过script标签，引入到html页面中。 内联式Javascript：代码写在标签内部 let 变量名（let不允许多次声明一个变量！！） let和var的区别： var声明： 可以先使用再声明（不合理） var声明的变量可以重复声明（不合理） 变量提升、全局变量、没有块级作用域等 通过单引号（''）、双引号（""）或反引号
Javascripts获取元素操作方式（ES5语法和ES6语法获取单个/多个操作元素）
qq_52367032的博客
10-23 827
Javascripts获取元素操作方式（ES5语法和ES6语法获取单个/多个操作元素）
ES6如何提取对象的部分属性?
xuejianxinokok的专栏
06-06 2876
在前端项目中需要对返回的数据字段进行裁剪的时候会用到此方法。
Java：数组总结
weixin_44396481的博客
10-01 201
//为数组分配内存空间的语法：数组名字=new 数组元素的类型[数组元素的个数]; //数组的下标是从0开始的 //二维数组的第一个下标元素代表所在的行，第二个下表元素代表所在的列 //将数组a1中的第六个成员起的10个数据成员拷贝到a2数组中方法： //1、使用循环语句依次把数组a1的直飞那个元素复制到到a2中 //2、使用java.util.Arrays类的copyOfRange(int[] original,int from,int to)的方法，把a1中指定范围的数据拷贝到a2中。 public.
es6数组里面获取某个值对_解析以获取es6中数组的最后一个元素
weixin_39603573的博客
12-20 794
In coffeescript this is straightforward:coffee> a = ['a', 'b', 'program'][ 'a', 'b', 'program' ]coffee> [_..., b] = a[ 'a', 'b', 'program' ]coffee> b'program'Does es6 allow for something simi...
ES6 获取元素class值 进行单元性移除
qingzhishui的博客
06-22 2669
一、ES6 数组单元性移除菜鸟小编在工作中进行数组进行子项移除的时候,发现ES6暂时未提供方法进行单元性移除,故尝试着写一个方法进行完成，不足之处 请大家指点，废话不多说直接贴代码：代码示意图:完整代码:let classArray = document.getElementById('live').className.split(" ");function checkClassExit(obj ...
node-v12.16.3-x86.msi
最新发布
04-25
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
向对象中添加一条新的属性 js es6
05-31
在 ES6 中，可以使用 class 和 constructor 来定义一个类并添加属性。例如，若要向一个类中添加一个名为 name 的属性，可以这样写： ```javascript class Person { constructor(name) { this.name = name; } } `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值