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

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>

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>

通过 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>

设置属性的方式

直接通过赋值的方式

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

注意：在 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>

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>

注意：通过 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>