[英]apply object of style to DOM element
I know we can use .style
to apply css to DOM element like this: 我知道我们可以使用.style
将CSS应用于DOM元素,如下所示:
document.getElementById("test").style.color="red";
I am wondering, if it is possible to apply a style object, something like this: 我想知道,是否可以应用样式对象,如下所示:
newStyle: {
position : 'fixed';
width : '300px';
height : '20px';
top : '0';
}
how to apply newStyle
by using .style
, is it possible? 如何通过使用.style
来应用newStyle
,这可能吗? ( We are not using jQuery here) (我们这里不使用jQuery)
You can use Object.assign
: 您可以使用Object.assign
:
Object.assign(myElement.style, {
width: '300px',
height: '20px'
});
Object.assign(document.getElementById("test").style, { position: 'fixed', width: '300px', height: '100px', top: '0' });
<div id="test" style="background: green"></div>
you can loop through properties of styles as - 您可以通过以下方式遍历样式的属性:
var newStyle = {
position : 'fixed',
width : '300px',
height : '20px',
top : '0'
};
for (i in newStyle)
document.getElementById("test").style[i] = newStyle[i];
Try this: 尝试这个:
var mystyle = { color: 'red' }; for (var property in mystyle) { if (mystyle.hasOwnProperty(property)) { document.getElementById("updateStyle").style[property] = mystyle[property]; } }
<p id="updateStyle">Hi This is demo text.</p>
replace updateStyle
with your own id 用您自己的ID替换updateStyle
Applying rule by rule is bad. 按规则应用是不好的。 It makes the browser re-render multiple times. 它使浏览器重新渲染多次。 You can apply all the changes in one shot - by using cssText 您可以一次性使用所有更改-通过使用cssText
So, in your case, you need to convert the object into a string and then apply all the styles in one shot: 因此,根据您的情况,您需要将对象转换为字符串,然后一次性应用所有样式:
var newStyle = {
position: 'fixed',
width: '300px',
height: '20px',
top: '0'
}
var styles = [];
for(var rule in newStyle) styles.push(rule+': '+newStyle[rule]);
document.getElementById("test").style.cssText = styles.join(';');
You can extend the prototype of the " HTMLElement ". 您可以扩展“ HTMLElement ”的原型。 Add a method to loop through a object containing the style information. 添加一种方法来遍历包含样式信息的对象。 You can do it like this: 您可以这样做:
HTMLElement.prototype.applyStyleObject = function (styleObject) {
for (var item in this.style) {
var objProp = styleObject[item];
if (objProp !== undefined) {
this.style[item] = objProp;
}
}
}
I've done a first prototype as an example how to use this in the wild :): 我已经完成了第一个原型作为示例,说明如何在野外使用它:):
//The object containing the style elements var obj = { width: "200px", height: "100px" } var spanobj = { color: "red" } //Cached the div node var divNode = document.getElementById("div"); //Extend the HTMLElement prototype HTMLElement.prototype.applyStyleObject = function (styleObject) { for (var item in this.style) { var objProp = styleObject[item]; if (objProp !== undefined) { this.style[item] = objProp; } } } //Execute the new method divNode.applyStyleObject(obj); document.getElementById("span").applyStyleObject(spanobj); document.getElementsByTagName("figure")[0].applyStyleObject(obj);
div { border: solid 1px black; } figure { border: solid 1px black; }
<div id="div"></div> <span id="span">This is a span tag</span> <figure></figure>
If you've extended the prototype of an javascript object, it applies to all newly created instances of that kind of object. 如果您扩展了javascript对象的原型 ,则该对象将应用于该对象的所有新创建的实例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.