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. .net remoting(1)简单例子

    1.例子(程序间的通讯) class Program { static void Main(string[] args) { HttpChannel _channel = ); ChannelServ ...

  2. codeforces div2 C题思路训练【C题好难，我好菜】

    1017C The Phone Number: 构造数列使得LIS和LDS的和最小,定理已知LIS=L,LDS=n/L的向上取整,根据样例可以得到设置L=根号n,构造方法如样例 截断法构造,不用考虑边 ...

  3. silverlight5 OOB 直接p/invoke实现串口通信

    public class SerialWrapper : IDisposable     {         #region Enum         public enum StopBits     ...

  4. activemq 控制面板里Number Of Pending Messages、 Messages Enqueued等含义解释

    项目中在API登录接口采用了ActiveMQ消息队列中间件,采用三台MQ做集群

  5. 部署Tomcat及nginx负载均衡

    Web应用服务器的选择   (1)IBM的WebSphere及Oracle的WebLogic 性能高,但价格也高   (2)Tomcat 性价比高 Tomcat服务器是一个免费的开放源代码的Web应用 ...

  6. Python 面向对象1-面向对象介绍

    一.无论用什么形式来编程,我们都要明确记住以下原则: 1.写重复代码是非常不好的低级行为 2.你写的代码需要经常变更,写代码一定要遵循易读,易改的原则 3.函数编程与OOP(面向对象)的主要区别就是O ...

  7. js,JQuery实现,带筛选,搜索的select

    代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title& ...

  8. string通过逗号分割不用split方法

    package com.simon; import java.util.ArrayList; import java.util.Iterator; import java.util.List; pub ...

  9. Windows10 下Apache服务器搭建

    Windows10 下Apache服务器搭建   转 https://blog.csdn.net/sunqian666888/article/details/78561399 目录 一.软件下载 二. ...

  10. Ajax技术使用补充

    Ajax技术使用补充 一.Ajax发送数据的几种形式 发送字符串或数字 $.ajax({ url:"/ajax_test.html/", type:'POST', data:{'v ...