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

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

您可以在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];
}

不要认为这是可能的。

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

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.代码;创建一个对象变量来引用它，你会让你的代码更易于阅读:

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

…等。比您的示例更容易阅读(坦白地说，和jQuery一样容易阅读)。

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

如果你的CSS值为字符串，并且没有为元素设置其他CSS(或者你不关心覆盖)，使用cssText财产:

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

你也可以使用模板文字来获得更简单、更易读的多行css语法:

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

这在某种意义上是好的，因为它避免了每次你改变一个属性时重新绘制元素(你“一次”全部改变它们)。在某种程度上)。

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

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

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

注意:如果以后使用此方法添加或更改样式属性，之前使用'setAttribute'设置的属性将被擦除。

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

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

使用Object.assign:

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

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

你也可以创建一个快捷功能:

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

我只是无意中来到这里，我不明白为什么需要这么多代码来实现这一点。

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

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


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

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

你可以写一个这样的函数:

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

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

我们可以在Node原型中添加styles函数:

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

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

下面的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}";

使用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)

请考虑使用CSS添加样式类，然后通过JavaScript添加该类 班级名册< / >强劲,简单的add ()函数。

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