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

我有以下JavaScript变量：

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

我知道我可以像这样迭代地将它们设置为我的元素：

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

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

有没有可能一次把它们放在一起，像这样

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

---

JavaScript库允许您非常轻松地完成这些工作

jQuery

---

对象和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];
}

---

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

或者，您也可以在样式的属性之间循环-

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

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

看

例如：

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];
}

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

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

---

我认为这是不可能的

但您可以从样式定义中创建一个对象，然后循环使用它们

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

---

您最好的选择可能是创建一个可自行设置样式的函数：

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

）

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

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

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

但是，您不必反复使用

document.getElementById（…）.style.

code；创建一个对象变量来引用它，这样代码的可读性就会大大提高：

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

……等等。比您的示例更容易阅读（坦率地说，与jQuery替代方案一样容易阅读）

---

（如果Javascript设计正确，您也可以将

与

关键字一起使用，但最好不要这样做，因为它会导致一些严重的命名空间问题）

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

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

---

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

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

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

---

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

这是一个旧线程，因此我认为对于任何寻求现代答案的人，我建议使用Object.keys（）

---

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

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

或

例如：

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];
}

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

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

使用：

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

您还可以创建快捷方式功能：

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

---

我只是在这里绊倒了一下，我不明白为什么需要这么多代码来实现这一点

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

let样式=`
字号：15em；
颜色：红色；
变换：旋转（20度）`
document.querySelector（'*'）。style=style

---

a

在某些情况下，将CSS与javascript一起使用可能会对此类问题更有意义。请看下面的代码：

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

---

这只是在CSS类之间切换，解决了许多与重写样式相关的问题。它甚至可以使您的代码更加整洁。

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

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'
};

您可以编写如下所示的函数：

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

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

它将

元素

和

对象

属性列表中的样式声明应用于该对象。下面是一个用法示例：

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

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

//要应用的样式
常量myStyles={
“背景色”：“洋红色”，
“边框”：“10px点青色”，
“边界半径”：“5px”，
“框大小”：“边框框”，
“颜色”：“黄色”，
“显示”：“内联块”，
“字体系列”：“monospace”，
“字体大小”：“20px”，
“边距”：“1em”，
“填充”：“1em”
};
函数应用程序样式（el、样式）{
用于（样式中的常量道具）{
el.style.setProperty（prop，styles[prop]）；
}
};
//创建示例段落并将其附加到页面正文
const p=document.createElement（'p'）；
p、 text内容='这是一段'；
文件.正文.附件（p）；
//单击段落时，调用函数，提供
//段落和myStyles对象作为参数
p、 onclick=（ev）=>{
苹果风格（p，myStyles）；
}
//这一次，以页面主体为目标并提供一个对象文本
applyStyles（document.body，{'background-color'：'grey'}）我认为对于上述所有解决方案，这是一种非常简单的方法：

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;
});

点击！

你好

函数hello（）
{
（document.getElementById（“demo”）.style.cssText=
“字体大小：40px；背景：#f00；文本对齐：居中；”）
}
我们可以向节点原型添加样式功能：

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

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

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

它将保留任何其他现有样式并覆盖对象参数中存在的值。
在样式对象的
对象项中使用
CSSStyleDeclaration.setProperty（）
方法。


我们还可以使用此设置CSS属性的优先级（“重要”）。


我们将使用“hypen case”CSS属性名称


const styles={
“字体大小”：“18px”，
“字体大小”：“粗体”，
“背景色”：“浅灰色”，
颜色：“红色”，
“填充”：“10px！重要”，
页边空白：“20px”，
宽度：“100px！重要”，
边框：“1px纯蓝色”
};
const elem=document.getElementById（“my_div”）；
Object.entries（styles）.forEach（[prop，val]）=>{
常量[值，pri=”“]=val.split（！”；
元素样式集合属性（属性，
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});

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

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

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