JS批量操作CSS属性详细解析


Posted in Javascript onDecember 16, 2013
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .day
        {
         background-color:White;
        }
        .night
        {
         background-color:Black
        }
    </style>
    <script language="javascript" type="text/javascript">
        function operStyle() {
            var divObj = document.getElementById("divContent");
            var btnObj = document.getElementById("btnCommit");
            if (divObj.className == "day") {
                divObj.className = "night";
                btnObj.value = "开灯";
            } else {
            divObj.className = "day";
            btnObj.value = "关灯";
            }
        }
        //批量修改div的样式属性,由多种样式构成
        //方法1:
        function methodOne() {
            var divObj = document.getElementById("divTest");
            divObj.style.backgroundColor = "blue";
            divObj.style.border = "solid 1px red";
            divObj.style.width = "300px";
            divObj.style.height = "200px";
            divObj.style.backgroundPosition = "center";
        }
        //方法2:
        function methodTwo() {
            var divObj = document.getElementById("divTest");
            divObj.style.cssText = "background-color:Blue; border:solid 1px red; width:300px; height:200px; background-position:center";
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="divContent" class="day">
       <font color="red">我是一个div啊,咿呀咿呀呦!</font>
    </div>
    <input type="button" value="关灯" id="btnCommit" onclick="operStyle();" />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <hr />
    <h1>修改divTest的样式,多属性操作</h1>
    <div id="divTest" >
        <font color="red">修改divTest的样式</font>
    </div>
    <input type="button" value="修改divTest的样式" onclick="methodTwo()" />
    </form>
</body>
</html>

我们用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,提高页面性能。

Javascript 相关文章推荐
JS.findElementById()使用介绍
Sep 21 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
k8s node节点重新加入master集群的实现
Feb 22 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 #Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 #Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 #Javascript
js获取url中指定参数值的示例代码
Dec 14 #Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 #Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 #Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 #Javascript
You might like
PHP中的正规表达式(二)
2006/10/09 PHP
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
js闭包学习心得总结
2018/04/17 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
在Python中使用异步Socket编程性能测试
2014/06/25 Python
深入Python函数编程的一些特性
2015/04/13 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
django之使用celery-把耗时程序放到celery里面执行的方法
2019/07/12 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
《三顾茅庐》教学反思
2014/04/10 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
迟到检讨书范文
2015/01/27 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server