如何在JavaScript中设置多个CSS样式？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在JavaScript中设置多个CSS样式？相关的知识，希望对你有一定的参考价值。
我有以下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
如果您将CSS值作为字符串并且没有为该元素设置其他CSS（或者您不关心覆盖），请使用cssText property：
document.getElementById("myElement").style.cssText = cssString;
这在某种意义上是好的，因为它避免了每次更改属性时重新绘制元素（以某种方式“一次性”更改它们）。
另一方面，您必须首先构建字符串。
使用普通的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）
例：
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;
});
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'});
对于propertyObject内属性的值，您可以使用变量..
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];
}
在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>您可以在cs
以上是关于如何在JavaScript中设置多个CSS样式？的主要内容，如果未能解决你的问题，请参考以下文章