如何在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 

Answer 1

使用Object.assign:

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

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

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

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

Answer 2

如果您将CSS值作为字符串并且没有为该元素设置其他CSS(或者您不关心覆盖),请使用该cssText属性:

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

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

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

Answer 3

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

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

小心:如果稍后使用此方法添加或更改样式属性,则将删除使用"setAttribute"设置的先前属性.

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

Answer 5

打字稿中的强类型：

这个object.assign 方法很棒，但是使用打字稿，你可以像这样获得自动完成功能：

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

    Object.assign(element.style, newStyle);

请注意，属性名称采用驼峰命名法，不带破折号。

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

Answer 6

JavaScript库允许您轻松完成这些操作

jQuery的

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

对象和for-in-loop

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

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

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

Answer 7

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

Answer 8

我只是在这里偶然发现,我不明白为什么需要这么多代码来实现这一目标.

将CSS代码添加为字符串.

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

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

<div>a</div>

Answer 9

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

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

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

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

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