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 类与静态类的实现(续)
Apr 02 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 Javascript
jQuery实现拖拽效果插件的方法
Mar 23 Javascript
BootStrap响应式导航条实例介绍
May 06 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
js JSON.stringify()基础详解
Jun 19 Javascript
微信小程序日历插件代码实例
Dec 04 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 INI配置文件的解析实现分析
2011/01/04 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
javascript引用对象的方法
2007/01/11 Javascript
用javascript控制iframe滚动的代码
2007/04/10 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
python基础之入门必看操作
2017/07/26 Python
详解python之协程gevent模块
2018/06/14 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
Django中信号signals的简单使用方法
2019/07/04 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
公司企业表扬信
2014/01/11 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
房产授权委托书范本
2014/09/22 职场文书
提档介绍信范文
2015/10/22 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
Pygame Rect区域位置的使用(图文)
2021/11/17 Python