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. functiontools模块

    #!/usr/bin/env python# -*- coding:utf-8 -*-from functools import cmp_to_key a = [1, 6, 4, 5]a.sort(k ...

  2. 【bzoj4347】[POI2016]Nim z utrudnieniem dp

    题解: 感觉我简直是个傻逼 把题目数据范围看错了.. 然后觉得这题非常的不可做 sigmaai <1e7.... 这题的dp是非常简单的,注意到d很小 f[i][j][k]表示前i个,%d为j, ...

  3. CentOS7下Django环境的搭建安装python3.6.5,virtualenv django1.11.14

    1.帖子1https://blog.csdn.net/a249900679/article/details/51527200 2.virtualenv https://www.cnblogs.com/ ...

  4. MySQL事务提交过程（一）

    MySQL作为一种关系型数据库,已被广泛应用到互联网中的诸多项目中.今天我们来讨论下事务的提交过程. MySQL体系结构 由于mysql插件式存储架构,导致开启binlog后,事务提交实质是二阶段提交 ...

  5. mysql查看变量/配置文件位置

    //查看所有变量 show global variables //查看某个变量的值 show global variables where variable_name like '%innodb_fl ...

  6. BZOJ3240 [Noi2013]矩阵游戏 矩阵 快速幂 卡常

    原文链接http://www.cnblogs.com/zhouzhendong/p/8084891.html 题目传送门 - BZOJ3240 题意概括 F[1][1]=1F[i,j]=a*F[i][ ...

  7. 数位dp 模板

    不能有49 #include<bits/stdc++.h> using namespace std; //input by bxd #define rep(i,a,b) for(int i ...

  8. JavaSE| 网络编程

    URL URI(Uniform resource identifier):表示一个统一资源标识符 (URI) 引用,用来唯一的标识一个资源. URL(Uniform Resource Locator) ...

  9. element-ui upload组件上传

    方法一: <el-table-column label="操作"> <template slot-scope="scope"> < ...

  10. redis虚拟内存

    对于redis 这样的内存数据库, 内存总是不够用的. 除了可以将数据分割到多个 redis 服务器以外. 另外的能够提高数据库容量的办法就是使用虚拟内存技术把那些不经常访问的数据交换到磁盘上 如果我 ...