如何使用 Javascript 循环遍历 HTML 元素并删除内联属性？

Question

我正在使用一个在线商店平台，该平台不提供对页面上 HTML 的完全编辑访问权限，并且正在寻找一个普通的 JS 解决方案来删除我无法直接删除的各种内联样式。

我对用于此目的的可重用功能感兴趣，以便以后可以在另一个项目中使用这种类型的功能。

Answer 1

我的解决方案涉及创建一个二维数组和两个辅助函数。我希望其他人在他们的一个项目中发现这很有用：

第 1 步 - 设置元素/节点列表

第一部分是为您的应用程序填写您想要使用的元素。这个嵌套数组有两个值：相关元素的 CSS 选择器，以及一个布尔值（真/假）标志，用于指示该元素的子元素是否也应删除其属性。

var element_array = [
    ['.selector', true],
    ['.other-selector', false]
];

第二步：设置内联属性数组

下一步是指明要从每个元素中删除哪些 HTML 属性。每个都简单地输入一个数组：

var remove_attributes_array = [
    'style',
    'align',
    'border',
    'cellpadding',
    'cellspacing',
    'width',
    'height'
];

第 3 步：设置辅助函数

辅助函数执行搜索元素并删除其内联样式的逻辑。

功能一：agnostize_element_styles(array);

此函数循环遍历 element_array 变量（步骤 1 中的数组字面量）并执行第二个函数（实际上删除了属性）。如果第二个数组值为true，则该元素的子元素将被迭代，并且它们的内联属性也将被删除。

函数来源

function agnostize_element_styles(array) {
    for(var i = 0; i < array.length; i++)
    {
        var element_list = document.querySelectorAll(array[i][0]);

        for(var i = 0; i < element_list.length; i++)
        {
            inline_html_attributes( element_list[i], remove_attributes_array );

            if( array[i][1] === true && element_list[i].hasChildNodes() ) 
            {
                var child_nodes = element_list[i].querySelectorAll('*');

                for(var i = 0; i < child_nodes.length; i++)
                {
                    inline_html_attributes( child_nodes[i], remove_attributes_array );
                }
            }
        }
    }
}

功能2：inline_html_attributes(element);

此函数接受一个元素作为参数，然后删除步骤 2 的数组变量中指定的所有内联属性。

函数来源：

function inline_html_attributes(element, attribute_array) {

    for(var i = 0; i < attribute_array.length; i++)
    {
        element.removeAttribute(attribute_array[i]);
    }
}

第 5 步：使用第 1 步数组调用函数 1

要完成所有这些工作，只需运行第一个函数 (agnostize_element_styles)，将步骤 1 中的二维数组作为参数传递：

agnostize_element_styles(element_array);

查看完整代码

var element_array = [
    ['.selector', true],
    ['.other-selector', false]
];

var remove_attributes_array = [
    'style',
    'align',
    'border',
    'cellpadding',
    'cellspacing',
    'width',
    'height'
];

function agnostize_element_styles(array) {
    for(var i = 0; i < array.length; i++)
    {
        var element_list = document.querySelectorAll(array[i][0]);

        for(var i = 0; i < element_list.length; i++)
        {
            inline_html_attributes( element_list[i], remove_attributes_array );

            if( array[i][1] === true && element_list[i].hasChildNodes() ) 
            {
                var child_nodes = element_list[i].querySelectorAll('*');

                for(var i = 0; i < child_nodes.length; i++)
                {
                    inline_html_attributes( child_nodes[i], remove_attributes_array );
                }
            }
        }
    }
}

function inline_html_attributes(element, attribute_array) {

    for(var i = 0; i < attribute_array.length; i++)
    {
        element.removeAttribute(attribute_array[i]);
    }
}

agnostize_element_styles(element_array);