我有以下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
使用纯Javascript,你不能一次设置所有的样式;您需要为它们每个使用单行。
但是,您不必重复document.getElementById(…).style。一遍又一遍地编码;创建一个对象变量来引用它,你会让你的代码更易于阅读:
var obj=document.getElementById("myElement").style;
obj.top=top;
obj.left=left;
…等。比您的示例更容易阅读(坦白地说,和jQuery一样容易阅读)。
(如果Javascript设计正确,你也可以使用with关键字,但最好不要使用它,因为它会导致一些讨厌的名称空间问题)
不要认为这是可能的。
但是你可以用样式定义创建一个对象,然后循环遍历它们。
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);
这是一个老问题,但我认为对于那些不想覆盖先前声明的样式的人来说,使用一个函数可能是值得的。下面的函数仍然使用Object。赋值以正确地固定样式。以下是我所做的
function cssFormat(cssText){
let cssObj = cssText.split(";");
let css = {};
cssObj.forEach( style => {
prop = style.split(":");
if(prop.length == 2){
css[prop[0]].trim() = prop[1].trim();
}
})
return css;
}
现在你可以这样做
let mycssText = "background-color:red; color:white;";
let element = document.querySelector("body");
Object.assign(element.style, cssFormat(mycssText));
您可以通过向函数中同时提供元素选择器和文本来简化这一点,这样就不必使用Object了。每次都要分配。例如
function cssFormat(selector, cssText){
let cssObj = cssText.split(";");
let css = {};
cssObj.forEach( style => {
prop = style.split(":");
if(prop.length == 2){
css[prop[0]].trim() = prop[1].trim();
}
})
element = document.querySelector(selector);
Object.assign(element.style, css); // css, from previous code
}
现在你可以做:
cssFormat('body', 'background-color: red; color:white;') ;
//or same as above (another sample)
cssFormat('body', 'backgroundColor: red; color:white;') ;
注意:在选择之前,请确保您的文档或目标元素(例如,body)已经加载。
如果你的CSS值为字符串,并且没有为元素设置其他CSS(或者你不关心覆盖),请使用cssText属性:
document.getElementById("myElement").style.cssText = "display: block; position: absolute";
你也可以使用模板文字来获得更简单、更可读的多行css语法:
document.getElementById("myElement").style.cssText = `
display: block;
position: absolute;
`;
这在某种意义上是好的,因为它避免了每次更改属性时重新绘制元素(以某种方式“一次性”更改所有属性)。
另一方面,你必须先构建字符串。