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 相关文章推荐
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
自己整理的一个javascript日期处理函数
Oct 16 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
javascript文本模板用法实例
Jul 31 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
详解Node全局变量global模块
Sep 28 Javascript
ant design实现圈选功能
Dec 17 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 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中cookie的作用域
2008/03/27 PHP
php strtotime 函数UNIX时间戳
2009/01/14 PHP
9个PHP开发常用功能函数小结
2011/07/15 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
vue实现评价星星功能
2020/06/30 Javascript
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
初步讲解Python中的元组概念
2015/05/21 Python
十个Python程序员易犯的错误
2015/12/15 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
tensorflow-gpu安装的常见问题及解决方案
2020/01/20 Python
《美丽的彩虹》教学反思
2014/02/25 职场文书
教师职位说明书
2014/07/29 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
大学生赌博检讨书
2014/09/22 职场文书
白酒代理协议书范本
2014/10/26 职场文书
村党建工作汇报材料
2014/11/02 职场文书
2015年工程师工作总结
2015/04/30 职场文书
Rust中的Struct使用示例详解
2022/08/14 Javascript