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 相关文章推荐
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 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 创建标签云函数代码
2010/05/26 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
jQuery autocomplete插件修改
2009/04/17 Javascript
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
2014社区三八妇女节活动方案
2014/03/30 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
大学生心理活动总结
2014/07/04 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
个人整改措施书面材料
2014/10/24 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
学生病假条范文
2015/08/17 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript
GPU服务器的多用户配置方法
2022/07/07 Servers