代码之家 › 专栏 › 技术社区 › Moaaz Bhnas

如何从节点中删除多个属性?

nodes javascript

Moaaz Bhnas · 技术社区 · 6 年前

我有这个图像元素:

<img class="cat" src="img/tom.png" alt="Cat">

我想把两者都去掉 src 和 alt 一次属性。
我预料到了 removeAttribute() 方法接受多个参数,但它不接受。

除了这个重复的代码,还有其他方法可以做到这一点吗?

image.removeAttribute('src');
image.removeAttribute('alt');

4 回复 | 直到 6 年前

Nenad Vracar 6 年前

可以生成一个函数,该函数接受要删除的元素和属性。

function removeAttributes(element, ...attrs) {
  attrs.forEach(attr => element.removeAttribute(attr))
}

removeAttributes(document.querySelector('img'), 'src', 'alt')

<img class="cat" src="img/tom.png" alt="Cat">

如果您想在dom元素上调用它,可以扩展元素原型。

Element.prototype.removeAttributes = function(...attrs) {
  attrs.forEach(attr => this.removeAttribute(attr))
}

document.querySelector('img').removeAttributes('src', 'alt')

<img class=“cat”src=“img/tom.png”alt=“cat”>

user3210641 6 年前

不确定这会使它更好,但您可能会这样做:

['alt', 'src'].forEach(attribute => image.removeAttribute(attribute));

或者创建一个常规的移除属性函数:

const removeAttributes = (element, ...attributes) => attributes.forEach(attribute => element.removeAttribute(attribute));

您可以这样称呼它:

removeAttributes(image, 'alt', 'src');

Ali Sheikhpour 6 年前

jquery解决方案: 空间分隔属性,如 image.removeAttr('src alt') 应该有效。

编辑: 使用纯javascript,可以使用removeattribute在数组中循环:

momonga sama 5 年前

我就是这么做的--

(() => {
        'use strict';
        let token = 'src|alt';
        if (token === '' || token === '{{1}}') { return; }
        let tokens = token.split(/\s*\|\s*/);
        let selector = 'img';
        if (selector === '' || selector === 'img') {
            selector = `[${tokens.join('],[')}]`;
        }
        let rmattr = () => {
            let elements = document.querySelectorAll(selector);
            for ( let element of elements ) {
                for (let attr of tokens) {
                        element.removeAttribute(attr);
                }   
            }      
        };
        if (document.readyState === 'loading' || document.readyState === 'interactive' || document.readyState === 'complete') {
                 rmattr();
        } else {
                 addEventListener('load', rmattr);
        }
})();