如何在javascript中设置多个CSS样式?

如果您将css值作为字符串,并且没有为元素设置其他css(或者您不关心重写),请使用 cssText property :

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

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

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

使用 Object.assign :

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

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

您还可以创建一个快捷功能:

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

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

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

小心:如果稍后使用此方法添加或更改样式属性,则使用“setattribute”设置的先前属性将被删除。

生成一个函数来处理它,并用您想要更改的样式传递它参数。

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

对于属性对象内的属性值,可以使用变量。

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

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

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

将CSS代码添加为字符串。

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

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

<div>a</div>

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

或者您可以循环使用样式的属性-

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

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

别以为这样是可能的。

但您可以从样式定义中创建一个对象,并通过它们进行循环。

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

使用普通的javascript,您不能一次设置所有样式;您需要为每个样式使用一行。

但是,您不必重复 document.getElementById(...).style. 一次又一次地编写代码;创建一个对象变量来引用它,这样代码的可读性就会大大提高:

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

…等等。比您的示例更容易阅读(坦率地说,和jquery替代方案一样容易阅读)。

(如果javascript设计正确,也可以使用 with 关键字,但最好不要使用它,因为它可能会导致一些讨厌的名称空间问题)

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

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 )

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

这是旧的线程,所以我认为对于任何寻找现代答案的人来说,我建议使用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);

用 Zam 你会这样做的

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

在某些情况下,将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'
};

您可以编写如下函数:

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

对于上述所有解决方案,我认为这是一个非常简单的方法:

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