Question

我的JavaScript风格有问题。

我有一个像这样的对象： styles = {background：'blue'，width：'1000px'}

我需要write函数，它接受来自 styles 对象的每个属性，并将其应用为某些HTML元素的CSS选择器。

类似的东西：

function stylize(def){
     for(var key in def){
         document.getElementById("test").style.***SELECTOR***=def[key];
     }

}

但如何通过键值的值获取样式选择器？

我需要jquery等纯粹的JS解决方案。

Answer 1

只需使用方括号：

function stylize(def) {
    for (var key in def) {
        document.getElementById("test").style[key] = def[key];
    }
}

^{注意：这只是一个例子;不是生产代码。}

Answer 2

一种方法是：

＆＃13;

function setStylesByObj(el, styleObj) {
    var css = [];
    for (var prop in styleObj) {
        if (styleObj.hasOwnProperty(prop)) {
            css.push(prop + ': ' + styleObj[prop]);
        }
    }

    el.style.cssText = css.join(';');
}

var styles = {
    background: 'blue',
    height: '10em',
    width: '1000px'
};

setStylesByObj(document.getElementById('demo'), styles);

＆＃13;

<div id="demo" style="color: orange; font-weight: bold">Hello there, world.</div>

＆＃13;

虽然上面明确地覆盖了现有的style属性;为了保留这些属性，连接可能会更好，而不是覆盖：

＆＃13;

function setStylesByObj(el, styleObj) {
    var css = [];
    for (var prop in styleObj) {
        if (styleObj.hasOwnProperty(prop)) {
            css.push(prop + ': ' + styleObj[prop]);
        }
    }

    el.style.cssText += css.join(';');
}

var styles = {
    background: 'blue',
    height: '10em',
    width: '1000px'
};

setStylesByObj(document.getElementById('demo'), styles);

＆＃13;

<div id="demo" style="color: orange; font-weight: bold">Hello there, world.</div>

＆＃13;

Answer 3

如果您可以从您喜欢的图书馆访问Underscore的_.extend或其jQuery等效$.extend或类似的对象分配例程：

_.extend(element.style, styles);

这与@ SalmanA的解决方案基本相同，只是使用库例程，如果方便的话。

Answer 4

你可以用大写字母替换任何短划线，就像这样：

document.getElementById("test").style['backgroundColor'] = "#ff0000";

如果您想要一个准备好替换的函数，请使用jQuery libaray的jQuery.css：

jQuery("#test").css({'background-color':'#ff0000'})

Answer 5

或者你可以这样做：

document.getElementById('id1').style.color = 'red'

Javascript：如何从var设置样式选择器

5 个答案: