WebAPI-js设置或删除元素属性的方法

蔚落 2023-06-13 06:10 72阅读 0赞

#### HTML属性分类 ####

HTML 元素的属性分为两种：标准（内置）属性和自定义属性

*  标准属性：官方定义的属性
 *  自定义属性：HTML规范允许开发人员为元素设置非官方定义的属性；在最新的规范中推荐使用 `data-` 作为前缀来自定义属性

#### 获取属性值的方式 ####

###### 通过点 `.` 的方式 ######

想要获取指定元素对象的某个属性值直接通过 `.` 加属性名即可获取属性值

语法：

> elementObject.attributeName

*  `elementObject` 需要获取属性值的元素对象
 *  `attributeName` 属性名称

示例：

<button id="btn" name="myButton">按钮</button>
    
    <script> function $(id) { return document.getElementById(id) } $('btn').onclick = function () { // 通过 . 获取相关属性值 var res = $('btn').name // 打印 console.log(res) // myButton } </script>

![在这里插入图片描述][2019111416110418.gif]

#### H5 新增获取自定义属性的方法 ####

###### 通过 getAttribute() 方法 ######

通过该方法可以获取内置属性或通过 setAttribute() 设置的自定义属性的属性值，无法获取通过 `.` 的方式设置的自定义属性的属性值

语法：

> elementObject.getAttribute(attributeName)

注意：`attributeName` 可以是字符串类型的属性名，也可以是 JS 变量（变量中为字符串类型的属性名）

示例：

<input id="btn" type="button" name="myButton" value="按钮"/>
    
    <script> function $(id) { return document.getElementById(id) } $('btn').onclick = function () { // 通过 getAttribute() 获取相关属性值 var res = $('btn').getAttribute('value') // 打印 console.log(res) // button } </script>

![在这里插入图片描述][20191114162549531.gif]

###### 通过 dataset 属性（IE 11开始支持） ######

`dataset` 存储的是指定元素对象中所有以 `data-` 开头的自定义属性；通过 `.` 的方式或 `[ ]` 的方式即可获取相关自定义属性的值，获取值时不需要加 `data-` 前缀

**注意**：使用 `[]` 时，属性要加引号；例如：`el.['info']`

示例：

<input id="btn" type="button" value="按钮"/>
    
    <script> function $(id) { return document.getElementById(id) } $('btn').onclick = function () { // 设置自定义属性 $('btn').setAttribute('data-uname', 'myButton') $('btn').setAttribute('data-index', 369) $('btn').setAttribute('data-info', '这是一个按钮') // 没有加 data- 前缀的自定义属性 $('btn').setAttribute('user', 'WC，无情') // 获取所有自定义属性（是一个集合） console.log($('btn').dataset) // 获取指定的自定义属性值，不需要加 data- 前缀 console.log($('btn').dataset.info) } </script>

![在这里插入图片描述][20191115092147876.gif]

#### 设置属性的方式 ####

###### 直接通过赋值的方式 ######

先通过 `.` 的方式可以直接设置自定义属性也可以找到指定的属性；然后直接进行赋值即可设置属性或修改属性值

**注意**：在 JS 中通过 `.` 的方式设置自定义属性时使用 - （中划线）连接单词时会报错；可以通过 setAttribute() 方法或直接在元素上设置以 `data-` 为前缀的自定义属性

示例：

<input id="btn" type="button" value="按钮"/>
    
    <script> function $(id) { return document.getElementById(id) } $('btn').onclick = function () { // 打印修改前的属性值 console.log($('btn').type) // button // 通过赋值的方式修改相关属性值 $('btn').type = 'text' // 修改后 console.log($('btn').type) // text // 设置自定义属性 $('btn').dataname = 'myButton' // 获取自定义属性的值 console.log($('btn').dataname) // myButton } </script>

![在这里插入图片描述][20191114170216179.gif]

#### H5 方法 ####

###### 通过 setAttribute() 方法 ######

`elementObject.setAttribute(attributename,attributevalue)` 该方法用于给指定元素对象添加指定的属性，并为元素对象赋指定的值；该方法也可以修改内置属性的属性值

*  `attributeName` 字符串类型的自定义属性名称或存储名称的变量
 *  `attributeValue` 自定义属性的属性值，字符串或变量

示例:

<input id="btn" type="button" value="按钮"/>
    
    <script> function $(id) { return document.getElementById(id) } $('btn').onclick = function () { // 打印修改前的属性值 console.log($('btn').getAttribute('type')) // button // 修改相关标准属性的属性值 $('btn').setAttribute('type', 'text') // 修改后 console.log($('btn').getAttribute('type')) // text // 设置自定义属性 $('btn').setAttribute('data-name', 'myInput') // 获取自定义属性的值 console.log($('btn').getAttribute('data-name')) // myInput } </script>

![在这里插入图片描述][20191114183721211.gif]  
**注意**：通过 setAttribute() 方法设置的自定义属性通过 `.` 的方式无法获取其属性值

#### 移除属性 ####

`elementObject.removeAttribute(attributeName)` 删除元素对象中指定的属性

示例:

<input id="btn" type="button" value="按钮"/>
    
    <script> function $(id) { return document.getElementById(id) } $('btn').onclick = function () { // 打印属性值 console.log($('btn').getAttribute('value')) // 按钮 // 删除属性 $('btn').removeAttribute('value') // 获取属性的值 console.log($('btn').getAttribute('value')) // null } </script>

![在这里插入图片描述][20191114185736243.gif]

[2019111416110418.gif]: https://img-blog.csdnimg.cn/2019111416110418.gif
[20191114162549531.gif]: https://img-blog.csdnimg.cn/20191114162549531.gif
[20191115092147876.gif]: https://img-blog.csdnimg.cn/20191115092147876.gif
[20191114170216179.gif]: https://img-blog.csdnimg.cn/20191114170216179.gif
[20191114183721211.gif]: https://img-blog.csdnimg.cn/20191114183721211.gif
[20191114185736243.gif]: https://img-blog.csdnimg.cn/20191114185736243.gif