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动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
JavaScript的==运算详解
Jul 20 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
vue实现通讯录功能
Jul 14 Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 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通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
Python中的Matplotlib模块入门教程
2015/04/15 Python
python计算时间差的方法
2015/05/20 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
Python常用特殊方法实例总结
2019/03/22 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
python程序 创建多线程过程详解
2019/09/23 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
python openpyxl模块的使用详解
2021/02/25 Python
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
销售顾问的岗位职责
2013/11/13 职场文书
暑期实习鉴定
2013/12/16 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers