js的 cssText

转载自：https://www.cnblogs.com/majingyi/p/6840818.html

很多人用过 style.color、style.display 等直接设置元素的样式属性，但是 style.cssText 用过的人就不多了。

cssText 本质是什么？

cssText 的本质就是设置 HTML 元素的 style 属性值。

cssText的优势？

一般情况下我们用js设置元素对象的样式会使用这样的形式：

var element= document.getElementById(“id”);
element.style.width=”20px”;
element.style.height=”20px”;
element.style.border=”solid 1px red”;

样式一多，代码就很多；而且通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程，这种销毁和重建，都会增加浏览器的开销。

使用cssText：

element.style.cssText=”width:20px;height:20px;border:solid 1px red;”;

这样就可以尽量避免页面reflow，提高页面性能。

cssText 怎么用？

复制代码代码如下:

document.getElementById("d1").style.cssText = "color:red; font-size:13px;";

看了这个示例后，相信不说，也知道 style.cssText 是什么意思了，它就是设置 HTML 元素的 style 属性。

cssText 返回值是什么？

cssText也有个缺点，会覆盖之前的样式。因此使用cssText时应该采用叠加的方式以保留原有的样式。另外，在某些浏览器中（比如 Chrome），你给他赋什么值，它就返回什么值。在 IE 中则比较痛苦，它会格式化输出、会把属性大写、会改变属性顺序、会去掉最后一个分号，比如：

复制代码代码如下:

document.getElementById("d1").style.cssText = "color:red; font-size:13px;";
alert(document.getElementById("d1").style.cssText);

在 IE 中值为：FONT-SIZE: 13px; COLOR: red

解决办法：

Element.style.cssText += ‘;width:100px;height:100px;top:100px;left:100px;’

另外，这个属性在加有!important的行内样式时特别有用，比如，top:80px !important 。而用style.top="80px !important" 是加不上的。

js的 cssText相关推荐

js基础——cssText
以前,只知道设置css里的属性都是通过元素.style.属性名 = 属性值的方式,此时经常遇到的情况就是类似这样: var head= document.getElementById(&quo ...
JS cssText（二十一）
cssText本质是什么: 本质就是设置HTML元素的style属性值. 使用格式: document.getElementById("d1").style.cssText = ' ...
用JS查看修改CSS样式（cssText,attribute('style'),currentStyle,getComputedStyle）
CSS样式定义方法大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. 1 < ...
通过js 快捷给元素设置多个css属性 -- cssText
cssText js操作dom元素是很常见的操作. 有这么一个场景,对新创建的dom元素通过js设置多组css属性. 基操: let element = document.createElement( ...
js里写入css,js样式的写入与清除，cssText的疑问
这是CSS3动画本身的问题.还有reflow与否的问题. 简单来说,当有使浏览器reflow的操作的时候,动画会被重置,这时就能重复运行,但单单是repaint不行.而修改一个类的动画效果应该是能引起 ...
html中有csstext方法吗,style对象的cssText方法有哪些使用方法
这次给大家带来style对象的cssText方法有哪些使用方法,style对象的cssText方法使用的注意事项有哪些,下面就是实战案例,一起来看一下. cssText 本质是什么? cssText ...
超nb的网页标签弹窗js代码！
首先说一下业务需求: 需要在当前各主流浏览器上从tab标签形式弹出一个页面,尽量不要以单独窗口弹出. 下面是网上搜集并修改.验证后的js代码,以备以后参阅. function getUnionCook ...
一个JS对话框,可以显示其它页面,
还不能自适应大小 garyBox.js //JavaScript Document// gary 2014-3-27// 加了 px 在google浏览器没加这个发现设置width 和height没有 ...
【Three.js】关于Three.js的辅助库ststs.js报错的解决方案
[Three.js](一) 了解Three.js基本的代码样式与运行结果问题描述解决方案关于Three.js的问题,可以与作者共同讨论. 问题描述作者初学Three.js,需要用到ststs. ...

js的 cssText

js的 cssText相关推荐

最新文章

热门文章