Question

我在Javascript中编辑css样式时找到了this question，其中解决方案是使用

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对象而不是数组来传递属性名称和值。

Answer 5

您可以通过以下方式访问此类属性，而不是点符号：

man.age=25

相当于

man['age']=25

所以，试试这个

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

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

5 个答案: