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

Question

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

我对这种目的的可重用函数感兴趣，以便稍后我可以在另一个项目上使用这种类型的功能。

Answer 1

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

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

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

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

步骤2：设置内联属性数组

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

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

第3步：设置辅助函数

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

功能1：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），将第一步中的二维数组作为参数传递：

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);