js获取属性值,自定义属性,修改移除属性值

article/2025/3/3 5:17:24

补充:由于不清楚一些属性是内置属性还是自定义属性 所以h5规定 自定义属性使用date-开头作为属性并赋值

案例1:


<body><div date-index="1"></div>
</body>
<script>var div = document.querySelector('div');console.log(div.getAttribute('date-index'));   //打印为1
</script>

注:如果是自定义属性(自己给的属性)建议使用element.getAttribute('属性') 或者,如果是元素本身自带属性(如id),就使用element.属性

一.获取属性值

element.属性

获取内置属性(元素本身自带的属性

element.getAttribute('属性') //get 得到获取 attribute 属性

主要获得自定义属性 程序员自己添加的属性 被称为自定义属性

案例:获取div盒子属性的id 比如index=‘1’ 就是我们i自己定义的属性

<body><div id="demo" index="1"></div><script>var div = document.querySelector('div');console.log(div.id);console.log(div.getAttribute('id'));console.log(div.getAttribute('index'));</script></body>

二.自定义属性 设置属性值 

element.属性 = ‘值’;

案例1:修改属性id 

<body><div id="demo" index="1"></div><script> var div = document.querySelector('div');div.id = 'text';   //设置内置属性值</script></body>

案例2:修改元素的类名 使用className

<body><div id="demo" index="1" class="box"></div><script>var div = document.querySelector('div');div.id = 'text'; //设置内置属性值div.className = 'boxs';   //修改类名</script></body>

 element.setAttribute('属性', '值');

案例:修改自定义属性的值 index和class都是自己定义的属性

<body><div id="demo" index="1" class="box"></div><script>div.setAttribute('index', 2);div.setAttribute('class', 'nav');</script></body>

三.移除属性值

element.removeAttribute('属性');

案例:比如不想要index了 移除index属性

<body><div id="demo" index="1" class="box"></div><script>var div = document.querySelector('div');//移除属性div.removeAttribute('index')</script></body>


http://chatgpt.dhexx.cn/article/ni9R6j3B.shtml

相关文章

获取/移除属性值

1.获取属性值&#xff1a; element.属性 获取属性值 element.getAttribute&#xff08;‘属性’&#xff09;&#xff1b; 2.区别&#xff1a; element.属性 获取内置属性值&#xff08;元素本身自带的属性&#xff09; element.getAttribute&#xff08;‘属性’&#xff09;&…

JavaScript移除对象中不必要的属性

Thinking系列&#xff0c;旨在利用10分钟的时间传达一种可落地的编程思想。 业务开发中&#xff0c;我们经常会遇到&#xff1a;基于后端返回接口数据&#xff0c;前端保存到对象 Object 中&#xff0c;前端开发过程中为了一些场景的便利性&#xff0c;需要在该对象中增加相应的…

js移除属性

一、效果 代码 <style>div{width:100px;height: 100px;background-color: red;}.clsP{background-color: #00FF00;}</style><body><input type"button" value"移除属性" id"btn" /><div id"dv" score&q…

合天网安实验室CTF-解密100-Funny Crypto

合天网安实验室CTF-解密100-Funny Crypto 题目描述 tgbnjuy 8ujko9 5rfgy6 相关附件 题目链接 参考解题步骤 字母被围起来的字母图示颜色tgbnjuyh红8ujko9i绿5rfgy6t蓝 提交flag&#xff1a;hit

数字取证之Autopsy ——合天网安实验室学习笔记

实验链接 Autopsy Forensic Browser 是数字取证工具-The Sleuth Kit&#xff08;TSK&#xff09;的图形界面&#xff0c;用于对文件系统和卷进行取证。通过本实验学习文件系统取证的思想与方法&#xff0c;掌握Autopsy的使用。 链接&#xff1a;http://www.hetianlab.com/exp…

【合天网安】CONN.ASP暴库漏洞实验

0x01预备知识 1、概念&#xff1a; 相对路径和绝对路径 绝对路径&#xff1a;例如D&#xff1a;/test/test.mdb 相对路径&#xff1a;例如/test/test.mdb 2、%5C暴库 简单点说&#xff0c;就是在打开页面的时候把网页中的/换成%5C&#xff0c;然后提交就可以得到数据库地址…

【合天网安】FCKeditor 2.4.3文件上传漏洞

【合天网安实验室】FCKeditor 2.4.3文件上传漏洞 编辑器漏洞 常见的文本编辑器有FCKeditor、Ewebeditor、UEditor、KindEditor、XHeditor等&#xff0c;它们包含的功能类似&#xff0c;如图片上传、视频上传、远程下载等。使用这类编辑器减少了程序开发的时间&#xff0c;但也…

摩尔斯电码和栅栏密码 ——合天网安实验室学习笔记

实验链接 通过学习本实验理解摩尔斯电码和栅栏密码的编码解码过程&#xff1b;掌握编写摩尔斯电码的编码解码程序和编写多功能栅栏密码的编码解码程序。 链接&#xff1a;http://www.hetianlab.com/expc.do?ce64d3e661-ebbb-41fd-a220-a17d608f994e 实验简介 实验所属系列…

【合天网安】DoraBox之文件包含及任意文件读取漏洞

【合天网安实验室】DoraBox之文件包含及任意文件读取漏洞 目的&#xff1a; 过DoraBox靶场系列练习&#xff0c;学习任意文件包含、目录限制文件包含及任意文件读取漏洞的利用过程。 实验过程&#xff1a; 1.确保Apache、MySQL服务正常开启 2、查看.txt文本内容 3.使用includ…

合天网安实验室-sql注入实验一

根据指导书我们要先在实验机进入这个网址http://10.1.1.11:81 进入之后会看到三个实例。 实例一 根据指导书的提示来做这一题。后面两个实例也要看这个指导书。 先判断是否存在注入 方法一 在参数后面加上单引号,比如: http://xxx/abc.php?id1’ 如果页面返回错误&#xff…

合天网安《Weekly CTF》第四周

Check your source code 题目介绍 打开靶机&#xff0c;进步网站&#xff0c;是一个登陆框 首先&#xff0c;根据题名的提示&#xff0c;f12&#xff0c;发现存在source.txt 打开source.txt&#xff0c;出现源码 对源码进行分析 <?php $flag "XXXXXXXXXXXX"…

计算机取证之Xplico ——合天网安实验室学习笔记

实验链接 Xplico是一款开源的网络取证分析工具&#xff0c;其分析与呈现的能力非常强大。Xplico可以捕获Internet网络应用层流量&#xff0c;通过流量解析&#xff0c;解析出网络包中的各种应用数据&#xff0c;还原网络数据发送现场。通过本实验学习掌握Xplico使用方法&#…

合天网安实验室CTF-Exp200-Come on,Exploit me!

合天网安实验室CTF-Exp200-Come on,Exploit me! 题目描述 Audrey Tang. ⊙.⊙ 我只能说到这儿了 相关附件 exp200 题目链接 参考解题步骤 1、下载附件先用VSCode打开看看 换个行看看 通过and换行有68行 2、根据题目描述猜测   如果没有接触过perl语言看到这些文本应该…

CTF挑战赛-合天网安实验室

[TOCCTF挑战赛-合天网安实验室逆向解析] http://www.hetianlab.com/CTFrace.html 1.逆向100 修改后缀为.apk 安卓模拟器打开&#xff0c;发现要求输入Password 用Android逆向助手打开&#xff0c;dex转jar&#xff0c;发现明文password 输入&#xff0c;得到flag。 2.逆向200 …

内存取证之Volatility ——合天网安实验室学习笔记

实验链接 Volatility是一款顶级的开源内存取证分析工具&#xff0c;支持Windows&#xff0c;Linux&#xff0c;MaC&#xff0c;Android等系统的内存取证&#xff0c;它由Python编写成&#xff0c;通过本实验学习内存取证的思想与方法&#xff0c;掌握volatility的使用。 链接…

合天网安实验室CTF练习赛之逆向题

最近搞逆向&#xff0c;就做做CTF题吧 挑战地址&#xff1a;http://www.hetianlab.com/CTFrace.html 对linux的逆向还没深入学习&#xff0c;所以re300暂时空着 2017.11.07&#xff1a;竟然还想起有这个事情没完成....,那就现在完成re300吧&#xff1a;合天网安实验室CTF练习…

合天网安实验室CTF-解密200-找茬游戏

合天网安实验室CTF-解密200-找茬游戏 题目描述 diff 相关附件 cry200.zip 题目链接 参考解题步骤 1、下载附件解压后得到一个文件夹&#xff0c;里面有两张图片 2、直接仔细观察未发现不同之处 3、既然表面没有不同&#xff0c;那应该是内部信息不同啦&#xff0c;用binw…

合天网安实验室CTF-Steg150-一段欢快的曲调

合天网安实验室CTF-Steg150-一段欢快的曲调 题目描述 滴滴 相关附件 stego100.wav 题目链接 参考解题步骤 1、下载的附件是一段wav格式的音频&#xff0c;打开听了一下&#xff0c;确实是欢快的曲调。 2、听的时候很奇怪为什么左声道没有声音&#xff0c;直到听到第1分11秒…

CTF挑战赛-合天网安实验室-Reverse逆向200writeup

自己做的时候 那个INT3断点一直搞不定 后来按照这篇文章的方法成功 转载自合天小逆向探究断点异常 作者iFurySt 东搞西搞都在瞎搞&#xff0c;今天到合天上面看到一个逆向题(RE200)&#xff0c;拿下来搞了一下&#xff0c;学到了点东西&#xff0c;分享一下。 首先当然是…

合天网安实验室CTF-Web100-Give Me Flag

合天网安实验室CTF-Web100-Give Me Flag 题目描述 哎,不小心把代码弄乱惹 相关附件 web100.zip 题目链接 参考解题步骤 1、下载附件打开后是一段JavaScript代码&#xff0c;但看起来被混淆了 源文件是没有换行的&#xff0c;我这里手动换行以便观察 2、试了一下直接翻译&…