let element = document.createElement("div");
document.body.appendChild(heart).innerHTML = '我是新建元素的文案';
element.style.height = '100px';  // 设置元素高度
element.style['text-align'] = '100px'; // 设置元素行高
element.style.color = 'red'; // 设置文字颜色
如果只有一个css属性需要设置，上述操作肯定是很简单的，但是要是设置多个css属性的话，上述操作就显得很啰嗦。
 
该如何快捷简单的设置呢？
 
优雅的操作：
 
let element = document.createElement("div");
document.body.appendChild(heart).innerHTML = '我是新建元素的文案';
element.style.cssText = 'height: 100px; text-align: 100px; color: red';
                                    给一个HTML元素设置css属性，如  代码如下: var head= document.getElementById(“head”); head.style.width = “200px”; head.style.height = “70px”; head.style.display = “block”;  这样写太罗嗦了，为了简单些写个工具函数，如  代码如下: function setStyle(obj,css){ for(var atr in css){ obj.style[atr] = css[atr]; } } var head= document.getElementById(“
本质就是设置HTML元素的style属性值。
使用格式：
document.getElementById("d1").style.cssText = 'color:red;font-size:13px'
cssText返回值：
在一般的浏览器中，它返回你赋给它的值，但是在IE中，它会格式化输出、会把属性大写、会改变属性顺序、会去掉最后一个分号：
document.getElement("d1").style.cssText = "color:red,font-size:13px
                                    firefox等可以使用 var dom=document.getElementById(“name”); dom.setAttribute(“style”,”width:10px;height:10px;border:solid 1px red;”) ; IE中则必须使用style.cssText var dom=document.getElementById(“name”); dom1.style.cssText = “width:10px;height:10px;border:solid 1px red;”; 补充一下，目前style.cssText类似innerHTML了，已经成为一个
                                    之前我写过一篇博客，是通过 JS+Sass变量修改CSS的属性值的方式来实现的该需求，但在后续的测试过程中我发现，这个方式不兼容IE11及以下版本，但我所写的项目需要兼容IE11，所以我最终使用了`:root{}` + `var()` + `css-vars-ponyfill`的方法来解决该问题。...
    如果在一个网页中给id="mydiv"的元素添加css样式，先获取该节点：var obj = document.getElementById("mydiv");给节点添加css：如果需要添加的css不多的话，可以obj.style.widt...
                                    1. cssText 本质是什么？cssText 的本质就是设置 HTML 元素的 style 属性值。代码如下:document.getElementById("d1").style.cssText = "color:red; font-size:13px;";2. cssText 返回值是什么？在某些浏览器中（比如 Chrome），你给他赋什么值，它就返回什么值。在 IE 中则比较痛苦，它会格...
                                    用JS来动态设置CSS样式，常见的有以下几种 1. 直接设置style的属性  某些情况用这个设置 !important值无效如果属性有'-'号，就写成驼峰的形式（如textAlign）  如果想保留 - 号，就中括号的形式  element.style['text-align'] = '100px';element.style.height = '100px';2. 直接设置属性（只能用于某些属...
// !important 无作用，下面两句是等效的
document.getElementById("box").style.color = "red !important"
document