javascript - 将整个样式字符串设置为来自 javascript 的元素（不是单个样式参数）

Question

我需要通过javascript将任意样式设置为跨度。

我知道我可以做这样的事情span.style.height="250px"：但我需要能够从模板中插入随机的完整样式定义

例如

float:left; 
text-decoration:underline; 
cursor:pointer; 
color:blue;

有没有办法在 Javascript 中做到这一点？就像是：

element.style="all style definition here";

Answer 1

.style.cssText 属性怎么样？这是微软的解释。

像这样把它扔到你想要应用的样式中：

document.getElementById('myEl').style.cssText = 'float:left;margin-top:75px;';

至于浏览器支持，虽然它是 IE 专有的，但我相信它得到了很好的支持（至少在 IE、FF3 和 Safari 3.2 WIN 中有效）。

Answer 2

如果您希望它是轻量级的，请创建一个函数，例如：

function setStyles(element, styles)
{
    for(var s in styles) {
        element.style[s] = styles[s];
    }
}

然后您将样式作为对象文字传递：

setStyles(element, {float: "left",
                    textDecoration: "underline",
                    cursor: "pointer",
                    color: "blue"});

请注意，从 JavaScript 的角度来看，传入的样式引用必须遵循命名，因为该函数只是style通过 JavaScript 访问元素的对象来更改样式。

如果您必须从字符串中获取样式输入，那么您可以很容易地解析它并创建对象文字。

Answer 3

有element.setAttribute('style', '...');，但在 IE 中失败。

有一个解决方案，但我没有尝试过。