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

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

  •  1
  • Moaaz Bhnas  · 技术社区  · 6 年前

    我有这个图像元素:

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

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

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

    image.removeAttribute('src');
    image.removeAttribute('alt');
    
    4 回复  |  直到 6 年前
        1
  •  2
  •   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”>
        2
  •  2
  •   user3210641    6 年前

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

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

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

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

    您可以这样称呼它:

    removeAttributes(image, 'alt', 'src');
    
        3
  •  0
  •   Ali Sheikhpour    6 年前

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

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

        4
  •  0
  •   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);
            }
    })();