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. Windows Server 2012 R2 设置 NTP 服务

    其实和以前的server版本配置没啥不一样 都是先改注册表: HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\Config\ ...

  2. RPC远程过程调用实例

    什么是RPC RPC 的全称是 Remote Procedure Call 是一种进程间通信方式.它允许程序调用另一个地址空间(通常是共享网络的另一台机器上)的过程或函数,而不用程序员显式编码这个远程 ...

  3. 【CF666E】Forensic Examination

    题解: 熟练掌握了后缀自动机后大部分题目应该都比较容易想 首先对t建立广义后缀自动机 然后我们可以用线段树合并处理出每个点每个串出现的次数,然后求出最大值 匹配的时候比较巧妙 我们离线处理 对于同一个 ...

  4. Python_部分内置函数

    内置函数:可以直接调用的函数 all():传入的列表,元组,等等,只要一个为假,就为假(fales)(所有的都为真才为真) # None, {}:空字典, []:空列表, 0:零,():空集合,“”: ...

  5. 使用Phar来打包发布PHP程序

    简单来说,Phar就是把Java界的jar概念移植到了PHP界. Phar可以将一组PHP文件进行打包,还可以创建默认执行的stub(或者叫做 bootstrap loader),Phar可以选择是否 ...

  6. 记Ubuntu Mongodb 和 Mysql的安装与使用

    安装mongodb 参考链接 https://www.cnblogs.com/shileima/p/7823434.html https://blog.csdn.net/xlengji/article ...

  7. Idea中快捷键与小技巧的总结-->持续更新

    1.Scala类或单例对象中快速声明实例对象: eg. new SparkContext(conf).var 系统会自动提示,可以自动补全,如图: 2.ctrl+i与ctrl+o的区别: ctrl + ...

  8. TF之BN：BN算法对多层中的每层神经网络加快学习QuadraticFunction_InputData+Histogram+BN的Error_curve

    # 23 Batch Normalization import numpy as np import tensorflow as tf import matplotlib.pyplot as plt ...

  9. POJ 1904 King's Quest (强连通分量+完美匹配)

    <题目链接> 题目大意: 有n个王子,每个王子都有k个喜欢的妹子,每个王子只能和喜欢的妹子结婚,大臣给出一个匹配表,每个王子都和一个妹子结婚,但是国王不满意,他要求大臣给他另一个表,每个王 ...

  10. Codeforces 633C Spy Syndrome 2 【Trie树】+【DFS】

    <题目链接> 题目大意:给定一个只有小写字母组成的目标串和m个模式串(里面可能有大写字母),记目标串反过来后的串为S,让你从m个模式串中选出若干个组成S串(不区分大小写).输出任意一种方案 ...