如何在JavaScript中设置多个CSS样式？

Question

我有以下JavaScript变量:

var fontsize = "12px"
var left= "200px"
var top= "100px"

我知道我可以通过迭代的方式来设置元素，例如：

document.getElementById("myElement").style.top=top
document.getElementById("myElement").style.left=left

是否可能一次性将它们全部设置，像这样？

document.getElementById("myElement").style = allMyStyle 

- Mircea

---

在您的示例中，“allMyStyle”是什么？ 在开头，您有一个单个变量列表... - Felix Kling

字体大小：12像素；左侧：200像素；顶部：100像素。 - Mircea

如果这能够工作，它将是一个包含所有要设置的CSS的字符串：document.getElementById("myElement").style = font-size:12px; left:200px; top:100px - Mircea

有趣的是，似乎按顺序应用多个CSS规则而不是使用cssText方法更快：http://jsperf.com/csstext-vs-multiple-css-rules/4 - Andrei Oniga

或许有用 - undefined

Answer 1

如果您拥有CSS值的字符串，并且该元素没有设置其他CSS（或者您不关心覆盖），请使用cssText属性：

document.getElementById("myElement").style.cssText = "display: block; position: absolute";

你也可以使用模板字面量来实现更易读，更容易理解的多行类似CSS的语法：模板字面量。

document.getElementById("myElement").style.cssText = `
  display: block; 
  position: absolute;
`;

这在某种程度上很好，因为它避免了每次更改属性时都重新绘制元素（您以某种方式“一次性”更改它们所有）。

另一方面，您需要首先构建字符串。

- Felix Kling

---

document.getElementById("myElement").style.cssText +=';'+ cssString; 这行代码会返回一个经过“规范化”的元素样式值，这个新字符串将替换掉已有的属性名对应的值，并加入新的属性，而其余属性则保持不变。 - kennebec

@kennebec：刚试了一下，你是对的。我不知道这一点，我只是认为它会附加到已有的文本上。但它确实替换了值... - Felix Kling

我进行了一个jsperf测试，并发现按顺序应用多个css规则比使用cssText方法更快：jsperf.com/csstext-vs-multiple-css-rules/4 - Andrei Oniga

@RohitTigga：包含CSS规则的字符串。例如 display: block; position: absolute;。 - Felix Kling

为了防止您不想打开链接，我运行了@AndreiOniga的测试（http://jsperf.com/csstext-vs-multiple-css-rules/4），结果表明明确设置属性（例如，'elem.style.width ='300px';'）的速度几乎快了一个数量级，比所有其他替代方法都要快90％左右。而其他替代方法的速度都差不多一样慢。 - ruffin

Answer 2

使用Object.assign：

Object.assign(yourelement.style,{fontsize:"12px",left:"200px",top:"100px"});

这还让您能够合并样式，而不是重写CSS样式。

您还可以创建一个快捷函数：

const setStylesOnElement = function(styles, element){
    Object.assign(element.style, styles);
}

- Laimonas

---

遗憾的是，IE11不支持这种方法。 http://kangax.github.io/compat-table/es6/#test-Object_static_methods_Object.assign - AndrewSilver

使用Babel和众多的Polyfill库，在不兼容ES6功能的浏览器中获得支持。 - Periata Breatta

这就足够了，当你扩展一个简单的JavaScript对象时 - 完全不需要分配任何东西：Object.assign(document.querySelector('html').style, { color: 'red' }); ...只需确保样式不会在较低的元素中被覆盖。当在html元素上使用它时，这是非常可能的。 - nirazul

@Nirazul 我现在明白了，我的目标是空的：Object.assign({}, document.querySelector('html').style, { color: 'red'}) 与 Object.assign(document.querySelector('html').style, { color: 'red'})。 - Jonathan Dion

注意！我认为这会导致多次重绘。至少，通过使用“Proxy”对象进行测试，我发现“Object.assign”会导致多次调用“set”陷阱。 - Quelklef

Answer 3

@Mircea: 在单个语句中为元素设置多个样式非常容易。 它不会影响现有的属性并避免了使用循环或插件的复杂性。

document.getElementById("demo").setAttribute(
   "style", "font-size: 100px; font-style: italic; color:#ff0000;");

注意：如果您以后使用此方法添加或更改样式属性，则使用“setAttribute”设置的先前属性将被擦除。

- SHANK

---

对于那些考虑使用 setAttribute 重置样式的人来说，removeAttribute 可能会很有用。 - Cedric Ipkiss

可能是我个人认为的最佳解决方案。 - upss1988

Answer 4

创建一个函数来处理它，并传递带有您想要更改的样式的参数。

function setStyle( objId, propertyObject )
{
 var elem = document.getElementById(objId);
 for (var property in propertyObject)
    elem.style[property] = propertyObject[property];
}

然后像这样调用它

setStyle('myElement', {'fontsize':'12px', 'left':'200px'});

你可以使用变量来获取propertyObject内部属性的值。

- Gabriele Petrioli

---

我以前每次都单独使用.style属性，以免在更改样式时被覆盖，但这种方法更好，更简洁。 - dragonore

最佳解决方案，因为它像cssText一样灵活和有用，但更快。 - Simon Steinberger

Answer 5

我刚刚偶然进来，不明白为什么需要这么多代码才能实现这个。

使用字符串插值添加CSS代码。

let styles = `
    font-size:15em;
    color:red;
    transform:rotate(20deg)`

document.querySelector('*').style = styles

a

- Thielicious

---

我也使用这种方法，因为如果没有其他内联样式，它非常有用，但有时会引起问题。 - BaseScript

如果出现问题，那只是由于糟糕的实现。这完全取决于你在何时何地将其应用到你的代码中。 - Thielicious

Answer 6

一个JavaScript库可以让你轻松地完成这些事情

jQuery

$('#myElement').css({
  font-size: '12px',
  left: '200px',
  top: '100px'
});

对象和for-in循环

或者，一种更加优雅的方法是使用基本对象和for循环。

var el = document.getElementById('#myElement'),
    css = {
      font-size: '12px',
      left: '200px',
      top: '100px'
    };  

for(i in css){
   el.style[i] = css[i];
}

- Harmen

---

好的，但在这个项目中我不能使用jQuery......谢谢。 - Mircea

需要将 fontsize 写成 fontSize 吗？ - midstack

是的。属性是区分大小写的，即使使用字符串表示法也是如此。应该是fontSize: 12px。 - MyNameIsKo

Answer 7

Strongly typed in typescript:

使用typescript可以实现自动完成，object.assign 方法很棒。

    const newStyle: Partial<CSSStyleDeclaration> =
    { 
        placeSelf: 'centered centered',
        margin: '2em',
        border: '2px solid hotpink'
    };

    Object.assign(element.style, newStyle);

请注意属性名称采用驼峰式命名法而不是短划线。

它甚至会告诉你它们何时过时。

- Simon_Weaver

---

为了避免重复，最好将Object.assign包装在一个接受正确类型的函数中，但这是朝着正确方向迈出的好一步。 - undefined

Answer 8

在Javascript中设置多个CSS样式属性

document.getElementById("yourElement").style.cssText = cssString;

或者

document.getElementById("yourElement").setAttribute("style",cssString);

例子：

document
.getElementById("demo")
.style
.cssText = "margin-left:100px;background-color:red";

document
.getElementById("demo")
.setAttribute("style","margin-left:100px; background-color:red");

- eyupgevenim

Answer 9

你可以在 CSS 文件中创建单独的类，然后将类名分配给你的元素，

或者你可以通过以下方式循环样式属性 -

var css = { "font-size": "12px", "left": "200px", "top": "100px" };

for(var prop in css) {
  document.getElementById("myId").style[prop] = css[prop];
}

- Sachin Shanbhag

---

那不是一个选项，因为变量是动态的。 - Mircea

这不完全是用户要求的，但很可能是最可行的解决方案。+1 - Ryan Kinal

@Sachin，“font-size”需要改为驼峰式命名“fontSize”。除非使用setAttribute，否则连字符样式名称不能保证在所有浏览器中都能正常工作。 - Ashwin Prabhu

Answer 10

对我来说最简单的方法就是使用字符串/模板文字：

elementName.style.cssText = `
                                width:80%;
                                margin: 2vh auto;
                                background-color: rgba(5,5,5,0.9);
                                box-shadow: 15px 15px 200px black; `;

非常好的选择，因为您可以使用多行字符串使生活更轻松。

在这里查看字符串/模板文字： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

- Jelan Maxwell