使用Javascript函数编辑多种CSS样式

Question

我在使用Javascript编辑CSS样式时发现了这个问题 ，解决方案是使用

document.getElementById('element').style.MozBoxShadow = "1px 1px 1px #000";

我正在尝试编写一个函数，该函数需要像这样编辑参数数组：

var element = document.getElementById('element');
editElementStyles(element, new Array("width", "100%", "height", "100%"...etc.));

和功能：

function editElementStyles(element, args) {
    for (var i = 0; i < args.length; i += 2) {
        element.style.args[i] = args[i + 1];
    }   
}

但是，这当然不起作用，因为args[i]不是element.style的属性。 我该如何进行这项工作？

Answer 1

只是：

element.style[args[i]] = args[i + 1];

您正确地注意到args[i]和args不是element.style的属性，要解决此问题，您只需使用方括号表示法而不是点表示法即可访问这些属性。 顺便说一句，您还是在使用args[i] 。

结果是：

function editElementStyles(element, args) {
    for (var i = 0; i < args.length; i += 2) {
        element.style[args[i]] = args[i + 1];
    }   
}

顺便说一句，这似乎是将属性和值相关联的一种冒险方式。 我建议：

function editElementStyles (element, styles) {
    for (var prop in styles) {
        if (styles.hasOwnProperty(prop)) {
            element.style[prop] = styles[prop];
        }
    }
}

editElementStyles (elem, {'width' : '100%', 'color' : 'red'});

Answer 2

您可能想要更改功能以接受对象，因为您真正要寻找的是键/值对

editElementStyles(element, {"width" : "100%", "height" : "100%"});


function editElementStyles(element, args) {
    for (var key in args) {
        element.style[key] = args[key]
    }   
}

Answer 3

只需使用方括号符号即可，它使您可以使用变量的值来查找属性名称。

即将您的功能更改为：

function editElementStyles(element, args) {
    for (var i = 0; i < args.length; i += 2) {
        element.style[args[i]] = args[i + 1];
    }   
}

Answer 4

尝试使用：

element.style[args[i]] = args[i+1];

您可以像使用object.property一样通过object[property]访问属性。

但是，正如其他答案所建议的那样，最好使用json对象而不是array来传递属性名称和值。

Answer 5

代替点符号，您始终可以通过以下方式访问此类属性：

man.age=25

相当于

man['age']=25

所以，试试这个

element.style[args[i]]= args[i + 1];