如何在 JavaScript 中设置多种 CSS 样式？答案

【问题标题】：How can I set multiple CSS styles in JavaScript?如何在 JavaScript 中设置多种 CSS 样式？
【发布时间】：2011-04-27 11:37:12
【问题描述】：

我有以下 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

【问题讨论】：

allMyStyle 在您的示例中是什么？一开始你有一个单一变量的列表......
字体大小：12px；左：200px；顶部：100px
如果这可行，它将是一个包含所有要设置的 CSS 的字符串： document.getElementById("myElement").style = font-size:12px;左：200px；顶部：100px
但有趣的是，与使用 cssText 方法相比，按顺序应用多个 css 规则似乎更快：jsperf.com/csstext-vs-multiple-css-rules/4

标签： javascript coding-style

【解决方案1】：

JavaScript 库可以让您轻松完成这些事情

jQuery

>

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

对象和for-in-loop

或者，更优雅的方法是基本对象和 for 循环

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

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

【讨论】：

是的，但是在这个项目上我不能使用 jQuery...Thanx
需要把fontsize写成fontSize吗？
是的。属性区分大小写，即使使用字符串表示法也是如此。它应该是 fontSize: 12px。

【解决方案2】：

您可以在您的 css 文件中拥有单独的类，然后将类名分配给您的元素

或者你可以循环遍历样式的属性 -

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

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

【讨论】：

这不是一个选项，因为变量是动态的
这不是用户所要求的，但它很可能是最可行的解决方案。 +1
@Sachin "font-size" 需要骆驼大小写为 "fontSize"。除非您使用 setAttribute，否则不保证连字符样式名称可以跨浏览器使用。

【解决方案3】：

见for .. in

例子：

var myStyle = {};
myStyle.fontsize = "12px";
myStyle.left= "200px";
myStyle.top= "100px";
var elem = document.getElementById("myElement");
var elemStyle = elem.style;
for(var prop in myStyle) {
  elemStyle[prop] = myStyle[prop];
}

【讨论】：

【解决方案4】：

不认为这是可能的。

但是您可以从样式定义中创建一个对象，然后循环遍历它们。

var allMyStyle = {
  fontsize: '12px',
  left: '200px',
  top: '100px'
};

for (i in allMyStyle)
  document.getElementById("myElement").style[i] = allMyStyle[i];

为了进一步开发，为它制作一个函数：

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

setStyles(document.getElementById("myElement"), allMyStyle);

【讨论】：

【解决方案5】：

最好的办法可能是创建一个自己设置样式的函数：

var setStyle = function(p_elem, p_styles)
{
    var s;
    for (s in p_styles)
    {
        p_elem.style[s] = p_styles[s];
    }
}

setStyle(myDiv, {'color': '#F00', 'backgroundColor': '#000'});
setStyle(myDiv, {'color': mycolorvar, 'backgroundColor': mybgvar});

请注意，您仍然必须使用与 javascript 兼容的属性名称（因此是 backgroundColor）

【讨论】：

【解决方案6】：

创建一个函数来处理它，并将参数传递给您想要更改的样式..

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 中的属性值，您可以使用变量..

【讨论】：

我每次都单独使用 .style 属性，以便在我要更改样式时不覆盖，但这样效果更好，更简洁。
最佳解决方案，因为与 cssText 一样灵活实用，但速度更快。

【解决方案7】：

使用纯 Javascript，您不能一次设置所有样式；您需要为它们中的每一个使用单行。

但是，您不必一遍又一遍地重复document.getElementById(...).style. 代码；创建一个对象变量来引用它，你会让你的代码更具可读性：

var obj=document.getElementById("myElement").style;
obj.top=top;
obj.left=left;

...等等。比您的示例更容易阅读（坦率地说，就像 jQuery 替代品一样容易阅读）。

（如果 Javascript 设计得当，您也可以使用 with 关键字，但最好不要这样做，因为它会导致一些讨厌的命名空间问题）

【讨论】：

不是这样，你可以通过cssText一次性设置所有样式。
@Felix: cssText 适合设置内联样式表值。但是，如果您也有类，或者如果您只想覆盖一些值而不是全部，那么使用cssText 可能会非常困难。所以你是对的；你可以这样做，但对于大多数用例，我建议不要这样做。
拥有类是没有争议的...obj.top 或obj.style.color 也只是设置内联样式表值。是的，在我的回答中，我说过会覆盖这些值……这取决于上下文是否有用。
你最好把那个 obj=document.getElementById("myElement").style;或设置您的属性 obj.style.top=top。
@kennebec - 嗯，我可以发誓我做到了。哦，好的，已编辑。感谢您的发现。

【解决方案8】：

如果您将 CSS 值作为字符串并且没有为元素设置其他 CSS（或者您不关心覆盖），请使用 cssText property：

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

您还可以使用template literals 来获得更简单、更易读的多行 CSS 类语法：

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

这在某种意义上是好的，因为它避免了每次更改属性时都重新绘制元素（以某种方式“一次”全部更改）。

另一方面，您必须先构建字符串。

【讨论】：

document.getElementById("myElement").style.cssText +=';'+ cssString;将为 element.style.cssText 返回一个“规范化”值 - 新字符串将用任何新值替换现有的命名属性，添加新值并保留其余部分。
@kennebec：刚刚试过，你是对的。我不知道，我只是认为它附加到已经存在的文本中。但它确实取代了价值观......
@kennebec 我进行了 jsperf 测试，发现按顺序应用多个 css 规则比使用 cssText 方法更快：jsperf.com/csstext-vs-multiple-css-rules /4
@RohitTigga：包含 CSS 规则的字符串。例如。 display: block; position: absolute;.
以防万一您不想点击链接，我运行了the test from @AndreiOniga 并且显式设置（例如elem.style.width = '300px';）几乎快了一个数量级 比所有选择。因此，替代品的速度要慢 90%，而且它们都同样缓慢。

【解决方案9】：

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

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

请注意：如果稍后您使用此方法添加或更改样式属性，则之前使用 'setAttribute' 设置的属性将被删除。

【讨论】：

removeAttribute 对于那些可能正在考虑使用setAttribute 重置样式的人来说可能会派上用场
对我来说可能是最好的解决方案

【解决方案10】：

这是旧线程，所以我想为任何寻找现代答案的人，我建议使用 Object.keys();

var myDiv = document.getElementById("myDiv");
var css = {
    "font-size": "14px",
    "color": "#447",
    "font-family": "Arial",
    "text-decoration": "underline"
};

function applyInlineStyles(obj) {
    var result = "";
    Object.keys(obj).forEach(function (prop) {
        result += prop + ": " + obj[prop] + "; ";
    });
    return result;
}

myDiv.style = applyInlineStyles(css);

【讨论】：

【解决方案11】：

在 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");

【讨论】：

【解决方案12】：

使用Object.assign：

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

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

你也可以做一个快捷功能：

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

【讨论】：

很遗憾IE11不支持这种方法kangax.github.io/compat-table/es6/…
@AndrewSilver - 使用 babel && 众多 polyfill 库之一在不兼容的浏览器中获得对 ES6 功能的支持。
使用 babel 的时候，就是这个方法！完美！
@Nirazul 怎么用？我尝试document.querySelector('html').style = Object.assign({}, document.querySelector('html').style, { color: 'red'})，但没有任何反应。
这就足够了，因为您扩展了一个简单的 javascript 对象 - 根本不需要分配任何东西：Object.assign(document.querySelector('html').style, { color: 'red' }); ...只需确保样式不会在较低的元素中被覆盖。在 html 元素上使用它时很有可能发生这种情况。

【解决方案13】：

我只是偶然发现这里，我不明白为什么要实现这一点需要这么多代码。

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

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

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

【讨论】：

我也使用这种方法，因为如果你没有其他内联样式，它很有用，但有时会导致问题。
如果出现问题，那只是因为实施不当。这完全取决于您将其应用到代码的方式、时间和地点。

【解决方案14】：

在某些情况下，将 CSS 与 javascript 一起使用可能更适合解决此类问题。看看下面的代码：

document.getElementById("myElement").classList.add("newStyle");
document.getElementById("myElement").classList.remove("newStyle");

这只是在 CSS 类之间切换并解决了许多与覆盖样式相关的问题。它甚至可以让你的代码更整洁。

【讨论】：

【解决方案15】：

您可以编写一个单独设置声明的函数，以免覆盖您未提供的任何现有声明。假设你有这个声明的对象参数列表：

const myStyles = {
  'background-color': 'magenta',
  'border': '10px dotted cyan',
  'border-radius': '5px',
  'box-sizing': 'border-box',
  'color': 'yellow',
  'display': 'inline-block',
  'font-family': 'monospace',
  'font-size': '20px',
  'margin': '1em',
  'padding': '1em'
};

您可能会编写一个如下所示的函数：

function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};

它采用element 和object 属性列表的样式声明以应用于该对象。这是一个使用示例：

const p = document.createElement('p');
p.textContent = 'This is a paragraph.';
document.body.appendChild(p);

applyStyles(p, myStyles);
applyStyles(document.body, {'background-color': 'grey'});

// styles to apply
const myStyles = {
  'background-color': 'magenta',
  'border': '10px dotted cyan',
  'border-radius': '5px',
  'box-sizing': 'border-box',
  'color': 'yellow',
  'display': 'inline-block',
  'font-family': 'monospace',
  'font-size': '20px',
  'margin': '1em',
  'padding': '1em'
};

function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};

// create example paragraph and append it to the page body
const p = document.createElement('p');
p.textContent = 'This is a paragraph.';
document.body.appendChild(p);

// when the paragraph is clicked, call the function, providing the
// paragraph and myStyles object as arguments
p.onclick = (ev) => {
  applyStyles(p, myStyles);
}

// this time, target the page body and supply an object literal
applyStyles(document.body, {'background-color': 'grey'});

【讨论】：

【解决方案16】：

对于上述所有解决方案，我认为这是一种非常简单的方法：

const elm = document.getElementById("myElement")

const allMyStyle = [
  { prop: "position", value: "fixed" },
  { prop: "boxSizing", value: "border-box" },
  { prop: "opacity", value: 0.9 },
  { prop: "zIndex", value: 1000 },
];

allMyStyle.forEach(({ prop, value }) => {
  elm.style[prop] = value;
});

【讨论】：

【解决方案17】：

<button onclick="hello()">Click!</button>

<p id="demo" style="background: black; color: aliceblue;">
  hello!!!
</p>

<script>
  function hello()
  {
    (document.getElementById("demo").style.cssText =
      "font-size: 40px; background: #f00; text-align: center;")
  }
</script>

【讨论】：

【解决方案18】：

我们可以在 Node 原型中添加样式功能：

Node.prototype.styles=function(obj){ for (var k in obj)    this.style[k] = obj[k];}

然后，只需在任何节点上调用样式方法：

elem.styles({display:'block', zIndex:10, transitionDuration:'1s', left:0});

它将保留任何其他现有样式并覆盖对象参数中存在的值。

【讨论】：

【解决方案19】：

在样式对象的Object.entries 中使用CSSStyleDeclaration.setProperty() 方法。
我们还可以用这个设置 CSS 属性的优先级（“重要”）。
我们将使用“hypen-case”CSS 属性名称。

const styles = {
  "font-size": "18px",
  "font-weight": "bold",
  "background-color": "lightgrey",
  color: "red",
  "padding": "10px !important",
  margin: "20px",
  width: "100px !important",
  border: "1px solid blue"
};

const elem = document.getElementById("my_div");

Object.entries(styles).forEach(([prop, val]) => {
  const [value, pri = ""] = val.split("!");
  elem.style.setProperty(prop, value, pri);
});

&lt;div id="my_div"&gt; Hello &lt;/div&gt;

【讨论】：

【解决方案20】：

下面的innerHtml是否有效

var styleElement = win.document.createElement("STYLE");
styleElement.innerHTML = "#notEditableVatDisplay {display:inline-flex} #editableVatInput,.print-section,i.fa.fa-sort.click-sortable{display : none !important}";

【讨论】：

【解决方案21】：

使用 ES6+，您还可以使用 反引号，甚至可以直接从某处复制 css：

const $div = document.createElement('div')
$div.innerText = 'HELLO'
$div.style.cssText = `
    background-color: rgb(26, 188, 156);
    width: 100px;
    height: 30px;
    border-radius: 7px;
    text-align: center;
    padding-top: 10px;
    font-weight: bold;
`

document.body.append($div)

【讨论】：

【解决方案22】：

请考虑使用 CSS 添加样式类，然后通过 JavaScript 添加此类 classList 和简单的 add() 函数。

style.css

.nice-style { 
fontsize : 12px; 
left: 200px;
top: 100px;
}

脚本 JavaScript

const addStyle = document.getElementById("myElement"); addStyle.classList.add('nice-style');

【讨论】：

【解决方案23】：

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

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

【讨论】：

【解决方案24】：

由于字符串支持添加，您可以轻松添加新样式而无需覆盖当前：

document.getElementById("myElement").style.cssText += `
   font-size: 12px;
   left: 200px;
   top: 100px;
`;

【讨论】：

【解决方案25】：

在 typescript 中强输入：

object.assignmethod is great，但使用 typescript 你可以像这样获得自动完成功能：

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

    Object.assign(element.style, newStyle);

注意属性名称是驼峰式，不带破折号。

这甚至会告诉您它们何时被弃用。

【讨论】：

【解决方案26】：

这是一个老问题，但我认为对于不想覆盖以前声明的样式的任何人来说，使用一个函数可能是值得的。下面的函数仍然使用 Object.assign 来正确修复样式。这就是我所做的

function cssFormat(cssText){

   let cssObj = cssText.split(";");
   let css = {};
   
   cssObj.forEach( style => {

       prop = style.split(":");

       if(prop.length == 2){
           css[prop[0]].trim() = prop[1].trim();
       } 

   }) 
   
  return css;
}

现在你可以做类似的事情

let mycssText = "background-color:red; color:white;";
let element = document.querySelector("body");

Object.assign(element.style, cssFormat(mycssText));

您可以通过在函数中同时提供元素选择器和文本来简化此操作，这样您就不必每次都使用 Object.assign。例如

function cssFormat(selector, cssText){
  
   let cssObj = cssText.split(";");
   let css = {};
   
   cssObj.forEach( style => {

       prop = style.split(":");

       if(prop.length == 2){
           css[prop[0]].trim() = prop[1].trim();
       } 

   }) 

   element = document.querySelector(selector);
   
   Object.assign(element.style, css); // css, from previous code

}

现在你可以这样做了：

cssFormat('body', 'background-color: red; color:white;') ;

//or same as above (another sample) 
cssFormat('body', 'backgroundColor: red; color:white;') ;

注意：确保您的文档或目标元素（例如正文）在选择之前已加载。

【讨论】：