JS元素属性操作方法，包括获取属性，修改属性，删除属性

本篇记录JS元素属性的操作的方法。其中包含获取属性两个方法，修改属性两个方法，删除属性一个方法

获取属性

element.属性

该方法通常获取自带属性，例如src href id title alt 等属性

<body><div id="demo" ></div><script>var div = document.querySelector('div');// 获取元素的属性值// element.属性console.log(div.id);</script>
</body>

element.getAttribute(‘属性’)

该方法通常获取自定义属性。

<body><div id="demo" index="1" ></div><script>var div = document.querySelector('div');// 获取元素的属性值// element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 indexconsole.log(div.getAttribute('index'));</script>
</body>

修改属性

element.属性=‘值’

该方法通常用来修改自带属性，例如src href id title alt 等属性。一般采用element.属性进行修改
以src为例来记录元素属性修改的方法。
具体代码如下所示

<body><button id="Revin1">Revin1</button><button id="Revin2">Revin2</button> <br><img src="data:images/Revin1.jpg" alt="" title="Revin1"><script>// 修改元素属性  src// 1. 获取元素var Revin1 = document.getElementById('Revin1');var Revin2 = document.getElementById('Revin2');var img = document.querySelector('img');// 2. 注册事件  处理程序Revin2.onclick = function() {img.src = 'images/Revin2.jpg';img.title = 'Revin2';}Revin1.onclick = function() {img.src = 'images/Revin1.jpg';img.title = 'Revin1';}</script>
</body>

element.setAttribute(‘属性’, ‘值’)

该方法通常针对自定义属性的修改，例如下面例子中的index就是自定义的属性，可以通过该方法进行属性修改
具体实现如下

<body><button id="Revin1" index="1">Revin1</button><button id="Revin2" index="2">Revin2</button> <br><script>// 1. 获取元素var Revin1 = document.getElementById('Revin1');var Revin2 = document.getElementById('Revin2');// 2. 注册事件  处理程序Revin2.onclick = function() {Revin1.setAttribute('index', 3);console.log(Revin1.getAttribute('index'));}Revin1.onclick = function() {Revin2.setAttribute('index', 4);console.log(Revin2.getAttribute('index'));}</script>
</body>

运行结果如下

删除属性

removeAttribute(属性)

删除元素的属性，自带属性与自定义属性均可删除

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

运行结果如下

JS元素属性操作方法，包括获取属性，修改属性，删除属性相关推荐

【linux】linux命令如何查看文件、文件夹的属性，包括大小、修改时间、谁修改的...
[linux命令如何查看文件.文件夹的属性,包括大小.修改时间.谁修改的] 1.查看文件大小: #du -sh filename 2.查看文件,文件夹属性: #ls -l filename #ls - ...
js获取html元素并且修改属性,JavaScript中获取和修改元素属性的值
在上一篇关于<JavaScript中几个操作元素对象的函数方法>文章中记录了分别通过元素的ID属性,元素的标签名,Class类名来获取元素的节点对象. 今天记录两个函数可以用来获取和修改获 ...
Mr.J-- jQuery学习笔记(二十九)--属性操作方法（获取属性判断）
获取 attr() <span class="span1" name="it666"></span> <span class=&q ...
JS和jQuery通过this获取html标签中的属性值
jQuery的创建对象，动态添加、修改、删除属性和方法
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...
java读取gradle属性,Spring Boot获取Gradle中包的属性
我试图将我的项目从Maven构建转换为Gradle . 该项目目前使用Spring Boot . 在我目前的maven配置中,我有 com.fasterxml.jackson.datatype jac ...
python字典增加和删除_Python字典的基本用法实例分析【创建、增加、获取、修改、删除】...
本文实例讲述了python字典的基本用法.分享给大家供大家参考,具体如下: 字典是一系列的键值对 . 每个键都与一个值相关联, 我们可以使用键来访问与之相关联的值. 与键相关联的值可以任何 pytho ...
从零开始学前端：中括号代替点操作，获取对象，自定义标签属性 --- 今天你学习了吗？（JS：Day3）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:初识函数,合法属性与自定义属性 - 今天你学习了吗?(JS:Day2) 文章目录从零开始学前端:程序猿小白 ...
Python中通过property实现属性的修改、删除、查看
1. property的作用在Python中,属性可以完成赋值.取值.删除的操作.如果我们想要在完成这些操作前,进行属性的校验工作(例如:赋值前判断数据的有效性.删除前判断合法性身份),则需要在方法 ...
javascript动态添加、修改、删除对象的属性和方法
上一节介绍了如何引用一个对象的属性和方法,现在介绍如何为一个对象添加.修改或者删除属性和方法. 在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例 ...

JS元素属性操作方法，包括获取属性，修改属性，删除属性

JS元素属性操作方法，包括获取属性，修改属性，删除属性

获取属性

element.属性

element.getAttribute(‘属性’)

修改属性

element.属性=‘值’

element.setAttribute(‘属性’, ‘值’)

删除属性

removeAttribute(属性)

JS元素属性操作方法，包括获取属性，修改属性，删除属性相关推荐

最新文章

热门文章