Question

我想更改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;

那么，style和currentStyle出了什么问题？如果没有for each循环遍历样式对象，我该怎么做呢？

Answer 1

您可以将<style>元素附加到包含<head>变量的文档的style_str部分...

但请务必遵循以下语法：".class{"+style_str+"}"

或者，最简单的选择是循环：

for( prop in style_obj ) {
   el.style[prop] = style_obj[prop];
}

Answer 2

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

您当然也可以使用您喜欢的库中的_.extend函数，例如Underscore.js，就像在_.extend(el.style,style_obj)中一样，这与逐个复制属性基本相同。

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

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

出于上天的缘故，不要在头部附加style元素来做到这一点。

Javascript - 设置元素的样式属性

2 个答案: