js可实现用户对页面中的选择条件改变页面中的样式，页面样式可以通过style修饰，也可以通过css修饰，先来看一下js改变style样式，代码如下:

案例一：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>对样式的修改</title>

    </head>

    <style type="text/css">

        #div1 {

            width: 400px;

            height: 300px;

            color: #fff;

            background-color: gold;

        }

    </style>

    <body>

        <div id="div1">div1</div>

        <input type="button" value="黑色" onclick="test4(this)" />

        <input type="button" value="红色" onclick="test4(this)" />

        <script language="javascript">

            function test4(e) {

                var div1 = document.getElementById('div1');

                if(e.value == "黑色") {

                    div1.style.backgroundColor = "black";

                };

                if(e.value == "红色") {

                    div1.style.backgroundColor = "red";

                };

            }

        </script>

    </body>

</html>

案例二：

        <div id="div1" class="style1">div1</div>

        <input type="button" value="黑色" onclick="test4(this)" />

        <input type="button" value="红色" onclick="test4(this)" />

        <script language="javascript">

            function test4(event) {

                //获取样式表中所有class选择器都获得

                var ocssRules = document.styleSheets[0].rules;

                //从ocssRules中取出你希望的class，然后以对象的方式修改样式

                var style1 = ocssRules[0];

                console.log(style1.style);

                if(event.value == "黑色") {

                    //window.alert(style1.style.backgroundColor);

                    style1.style.backgroundColor = "black";

                } else if (event.value == "红色") {

                    style1.style.backgroundColor = "red";

                }

            };

        </script>

一般js获取内部样式和外部样式使用getComputedStyle，以及currentStyle。

　　IE下获取元素的实际属性值使用currentStyle属性，getComputedStyle同currentStyle作用相同，但是适用于FF、opera、safari、chrome。但用这种方法在IE7，IE8，IE9获取元素属性值都会报错。

　　“DOM2级样式”增强了document.defaultView，提供了getComputedStyle()方法。这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如“:after”）。如果不需要伪元素信息，第二个参数可以是null。getComputerStyle()方法返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算的样式。

　　出于对兼容性的考虑，故将两种获取的方法封装在同一个函数中，使其见招拆招，遇到不同的浏览器，自动采取相适应的方法：

　　js:

        <div class="test">用来测试的div</div>

        <script type="text/javascript">

            var test = document.getElementsByClassName('test')[0];

            function getStyle(obj, attr) {

                if(obj.currentStyle) {

                    return obj.currentStyle[attr];

                } else {

                    return document.defaultView.getComputedStyle(obj, null)[attr];

                }

            };

　　　　　　　　var result = getStyle(test, 'width');
　　　　　　　　console.log(result);

</script>
        <div class="test">用来测试的div</div>

        <script type="text/javascript">

            var test = document.getElementsByClassName('test')[0];

            function getStyle(obj, attr) {

                return(obj.currentStyle) ? obj.currentStyle[attr] : document.defaultView.getComputedStyle(obj, null)[attr];

            }

            var result = getStyle(test, 'width');

            console.log(result);

        </script>

css:

body{

    height: 3000px;

    position: relative;

}

.test{

    height: 200px;

    width: 200px;

    background-color: red;

    position: absolute;

    bottom: 0;

    right: 0;

}

javascript对样式的操作的更多相关文章

  1. JavaScript 客户端JavaScript之样式表操作(DOM API 提供模块之一)

    层叠样式 表和动态HTML   层叠样式表(CSS)是指定HTML文档或XML文档的表现的标准.     使用CSS和Javascript,可以创建出各种视觉效果,这些效果可以统称为动态HTML(DH ...

  2. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  3. 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  4. JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作

    javascript-对文档对象的内容.属性.样式的操作 一.操作内容 1. innerHTML 用来设置或获取对象起始和结束标签内的内容(识别html标签) 2. innerText 用来设置或获取 ...

  5. JavaScript对SVG进行操作的相关技术

    原文地址:http://www.ibm.com/developerworks/cn/xml/x-svgscript/   本文主要介绍在 SVG 中通过编程实现动态操作 SVG 图像的知识. SVG ...

  6. 网页制作之JavaScript部分 2 - DOM操作

    1.DOM的基本概念  htmlDOM是一种面向对象的树的模型,它包含html中的所有元素:通过html可以找到所有包含在dom中的元素. DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对 ...

  7. Day3JavaScript（一）JavaScript初识以及bom操作

    JavaScript简介 什么是JavaScript 弱类型,动态类型,基于原型的直译性的编程语言.1995年netscape(网景)在导航者浏览器中设计完成. JavaScript的特点 1.与HT ...

  8. jQuery学习之------元素样式的操作

    jQuery学习之------元素样式的操作 一..addClass( className )方法----增加样式 1.addClass( className ) : 为每个匹配元素所要增加的一个或多 ...

  9. Javascript学习笔记二——操作DOM

    Javascript学习笔记 DOM操作: 一．GetElementById() ID在HTML是唯一的,getElementById()可以定位唯一的一个DOM节点 二．querySelector( ...

随机推荐

  1. bzoj2961 共点圆 bzoj 4140

    题解: 比较水的一道题 首先我们化简一下式子发现是维护xxo+yyo的最值 显然是用凸包来做 我们可以直接用支持插入删除的凸包 也是nlogn的 因为没有强制在线,我们也可以cdq,考虑前面一半对答案 ...

  2. Nginx动静分离

    动静分离 Nginx动静分离是让动态网站里的动态网页根据一定规则把不变的资源和经常变的资源区分开来,动静资源做好了拆分以后,我们就可以根据静态资源的特点将其做缓存操作,这就是网站静态化处理的核心思路. ...

  3. Codeforces 609F Frogs and mosquitoes 线段树

    Frogs and mosquitoes 用线段树维护每个点覆盖的最小id, 用multiset维护没有吃的蚊子. #include<bits/stdc++.h> #define LL l ...

  4. js设置元素不能编辑

    js设置元素不能编辑 $("#startLocation").attr("readOnly",true); js设置元素可以编辑 $("#startL ...

  5. L3-001 凑零钱 （30 分) dfs加后缀剪枝

    韩梅梅喜欢满宇宙到处逛街.现在她逛到了一家火星店里,发现这家店有个特别的规矩:你可以用任何星球的硬币付钱,但是绝不找零,当然也不能欠债.韩梅梅手边有 1 枚来自各个星球的硬币,需要请你帮她盘算一下,是 ...

  6. 在排序数组中查找元素的第一个和最后一个位置(给定一个按照升序排列的整数数组 nums，和一个目标值 target。找出给定目标值在数组中的开始位置和结束位置。)

    示例 1: 输入: nums = [5,7,7,8,8,10], target = 8 输出: [3,4] 示例 2: 输入: nums = [5,7,7,8,8,10], target = 6 输出 ...

  7. Ubuntu 硬盘分区只读，重新挂载为读写分区之后，文件依然创建出错

    原因: 分区只读,可能是windows没有正常关机,或者使用了混合休眠模式. 解决方案: sudo mount -o remount,rw /dev/sdaX 若重新挂载后,创建文件以及文件夹失败: ...

  8. Jquery操作一遍过

    什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQu ...

  9. 深入理解JS防抖与节流

    参考博客:JS防抖和节流,感谢作者的用心分享 日常开发过程中,滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿,这时候我们更希望把多次计算合并成一次,只操作一个精确点,JS把这种方式称为deb ...

  10. Area POJ - 1265 -皮克定理-叉积

    Area POJ - 1265 皮克定理是指一个计算点阵中顶点在格点上的多边形面积公式,该公式可以表示为2S=2a+b-2, 其中a表示多边形内部的点数,b表示多边形边界上的点数,S表示多边形的面积. ...