添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
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