1

我想更改 DOM 元素的style属性。这是它的工作方式：

var el = document.getElementById("kaka");
    el.style.top = "10px";
    el.style.left = "20px";

但是，我有很多属性要设置，它们的存储Object方式如下：

var style_obj = {
    top: "10px",
    left: "20px",
    backgroundColor: "#009966"
}

所以我想分配style这样的： 

el.style = style_obj;

但这样它不起作用，而且这种方式也是如此：

el.currentStyle = style_obj;

即使这样它也不起作用：

var style_str = JSON.stringify( style_obj ).replace(/{/g,"").replace(/}/g,"");

el.style.cssText = style_str;

那么， astyle和有什么问题currentStyle？我该怎么做，而不for each循环样式对象？

4

2 回答 2

2

You can append a <style> element to the <head> section of your document containing the style_str variable...

but make sure you follow the syntax: ".class{"+style_str+"}"

Or again, the simplest option is to loop:

for( prop in style_obj ) {
   el.style[prop] = style_obj[prop];
}
于 2013-08-13T12:11:27.673 回答
1

您不能像那样分配样式对象。样式对象的类型是CSSStyleDeclaration。由于分配给它会默默地失败。您可以设置和获取其各个属性，如elt.style.color. 有关更详细的信息，例如!important修饰符的存在，您可以使用其 API，如elt.style.getPropertyPriority('color'). 但是，据我所知，没有办法自己创建CSSStyleDeclaration对象。

当然，你也可以使用_.extend你喜欢的库中的函数，比如 Underscore.js，就像 in 一样_.extend(el.style,style_obj)，它本质上与一个一个地复制属性相同。

你也可以.cssText在有问题的元素上设置属性，如果它漂浮你的船。

如果通过分配样式对象，您同时尝试删除所有现有属性，那么您必须单独执行此操作；设置cssText为空字符串应该可以解决问题。

看在上帝的份上，不要通过style在头部附加一个元素来做到这一点。

于 2013-08-13T12:17:05.470 回答