当前位置：首页 > JavaScript

js实现attr

2026-04-05 21:40:18JavaScript

实现属性操作的方法

在JavaScript中，可以通过多种方式操作元素的属性。以下是几种常见的实现方法：

使用getAttribute和setAttribute

通过原生DOM方法获取和设置属性值：

// 获取属性
const element = document.getElementById('myElement');
const attrValue = element.getAttribute('data-attr');

// 设置属性
element.setAttribute('data-attr', 'newValue');

直接访问属性

对于标准HTML属性可以直接通过元素对象访问：

// 获取ID属性
const id = element.id;

// 设置class属性
element.className = 'new-class';

使用dataset访问自定义属性

针对HTML5的data-*属性：

// 获取data-*属性
const dataValue = element.dataset.attr;

// 设置data-*属性
element.dataset.attr = 'newDataValue';

属性操作封装函数

可以封装通用属性操作方法：

function attr(element, name, value) {
    if (value === undefined) {
        return element.getAttribute(name);
    } else {
        element.setAttribute(name, value);
    }
}

// 使用示例
const el = document.querySelector('#target');
attr(el, 'title', 'new title');  // 设置
const title = attr(el, 'title');  // 获取

jQuery风格的实现

如果需要类似jQuery的链式调用：

js实现attr

function $(selector) {
    const el = document.querySelector(selector);
    return {
        attr: function(name, value) {
            if (value === undefined) {
                return el.getAttribute(name);
            }
            el.setAttribute(name, value);
            return this;
        }
    };
}

// 链式调用示例
$('#myDiv').attr('data-test', '123').attr('class', 'container');