时间:2021-05-26
我们用js书写css样式通常会用下面的两种方式:
一般情况下我们用js设置元素对象的样式会使用这样的形式:
复制代码 代码如下:
var element= document.getElementById(”id”);
element.style.width=”20px”;
element.style.height=”20px”;
element.style.border=”solid 1px red”;
但是上面的方法有一个缺点,样式一多,代码就很多;而且通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程,这种销毁和重建,都会增加浏览器的开销。
js中有一个cssText的方法:
语法为:obj.style.cssText(”样式”);
上面的代码我们可以修改成:
复制代码 代码如下:
element.style.cssText=”width:20px;height:20px;border:solid 1px red;”;
这种写法可以尽量避免页面的多次reflow,提高页面性能。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
一般我们都用css来批量设置样式,现在我们用js也可以批量设置样式:总结三种方法如下复制代码代码如下:无标题文档#div1{width:100px;height
css操作的分类:css操作位置操作尺寸操作css操作之csscss代码:html代码:jQuery代码:效果如下:css操作之位置操作css代码:html代码
本文实例讲述了原生JS实现获取及修改CSS样式的方法。分享给大家供大家参考,具体如下:大家都知道在JavaScript原生操作中获取元素的样式,在实际操作是使用
DOM(DocumentObjectModle)操作文档的编程接口DOM定义了表示和修改文档的方法,不能修改css样式表,在js中使用DOM方法改变元素的css
前言可能大家一说起操作css样式,很多人都会想到jQuery的css方法:$(selector).css(name),但是有思考过如何使用原生js来实现类似的功