本文共 1515 字，大约阅读时间需要 5 分钟。

HTML 行间属性与属性获取方法

在 HTML 开发中，行间属性 (inline styles) 和属性获取方法是开发者常用的功能。以下将详细介绍 setAttribute 和 getAttribute 的使用方法，以及它们与 attr() 和 prop() 的区别。

行间属性与 DOM 属性

在 HTML 中，行间属性可以直接写在标签内部，使用 style 属性来设置内联样式。例如：

   
    Content
   

设置行间属性会在 DOM 元素的 attributes 属性中新增一个 Attr 对象。这个对象包含有属性名及其对应的值。通过 setAttribute 方法可以轻松地设置或修改行间属性。

getAttribute 方法

getAttribute 方法用于获取元素的行间属性值。它的使用方法如下：

元素.getAttribute('属性名')

• 返回值：如果找到对应的属性，返回该属性的值；如果没有找到该属性，返回 null。
• 注意点：getAttribute 仅能获取行间属性，不能获取 CSS 样式中的属性值。

示例：

var div1 = document.getElementById('div1');
div1.getAttribute('title'); // 返回 "divTitle"
div1.getAttribute('title1'); // 返回 "divTitle1"

setAttribute 方法

setAttribute 方法用于设置或修改元素的行间属性。它的使用方法如下：

元素.setAttribute('属性名', 属性值)

• 覆盖原有属性：如果元素已经有该属性，setAttribute 会覆盖原有的值。
• 新增属性：可以通过该方法为元素新增自定义的行间属性。

示例：

div1.setAttribute('data-source', '网站名称');

attr() 与 prop() 的区别

在 jQuery 中，attr() 和 prop() 方法看似相似，但它们的使用场景和内部实现有所不同。

1. 属性类型

• attr()：返回的是 HTML 标签上的属性值，属性值只能是字符串类型。
• prop()：返回的是 DOM 元素的属性值，可以是字符串、数字或布尔值。

2. 数据来源

• attr()：获取的是标签上的属性值，不能获取 DOM 元素的自定义属性。
• prop()：获取的是 DOM 元素的属性值，包括默认属性和通过 setAttribute 设置的属性。

3. 典型用途

• attr()：适用于获取标签上的属性值，例如 id、class 等。
• prop()：适用于获取 DOM 元素的属性值，例如 checked、disabled 等布尔属性。

典型应用示例

1. 复选框的状态获取

  
  复选框示例

var cb1 = document.getElementById('cb1');
console.log(cb1.getAttribute('checked')); // 返回 "checked"

通过 getAttribute('checked') 可以获取复选框的状态，但需要注意的是：勾选或取消勾选复选框会修改 checked 属性，而默认的 defaultChecked 属性会在页面刷新后恢复。

总结

在开发过程中，合理使用 getAttribute 和 setAttribute 方法可以方便地操作行间属性。对于布尔属性（如 checked、selected、disabled 等），建议使用 prop() 方法来获取或设置其状态。

转载地址：http://hvaq.baihongyu.com/