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. 【AtCoder】AGC015

    AGC015 A - A+...+B Problem #include <bits/stdc++.h> #define fi first #define se second #define ...

  2. day84-仿照admin实现一个自定义的增删改查组件

    一.admin的使用 app01的admin.py文件: class BookConfig(admin.ModelAdmin): list_display=[] list_display_links= ...

  3. Python 多进程multiprocessing

    一.python多线程其实在底层来说只是单线程,因此python多线程也称为假线程,之所以用多线程的意义是因为线程不停的切换这样比串行还是要快很多.python多线程中只要涉及到io或者sleep就会 ...

  4. ES集群

    1. ElasticSerach集群安装  修改配置文件elasticserach.yml [elk@localhost config]$ vi elasticsearch.yml # ------- ...

  5. oracle的存储过程和定时任务编写体会

    create or replace procedure clear_product is p_sql char(200) p_r_sql char(200) begin p_sql := ''; p_ ...

  6. TensorFlow激活函数+归一化-函数

    激活函数的作用如下-引用<TensorFlow实践>: 这些函数与其他层的输出联合使用可以生成特征图.他们用于对某些运算的结果进行平滑或者微分.其目标是为神经网络引入非线性.曲线能够刻画出 ...

  7. CodeForces - 893C Rumor【并查集】

    <题目链接> 题目大意: 有n个人,其中有m对朋友,现在你有一个秘密你想告诉所有人,第i个人愿意出价a[i]买你的秘密,获得秘密的人会免费告诉它的所有朋友(他朋友的朋友也会免费知道),现在 ...

  8. 使用element-ui table expand展开行实现手风琴效果

    写这篇博客的初衷:官网演示效果为点击toggle,已经展开的项不会因为其他项展开而关闭,所以延伸了下,扩展为手风琴效果. 效果前瞻: 官网table expand地址:http://element-c ...

  9. 实验吧debug

    在linux下进行调试时容易出现权限不够的情况:此时解决办法就是chmod 777+文件名提升权限,以实验吧debug为例,给出了简单的32elf文件,我在查看一些资料以后发现,我需要在main函数处 ...

  10. WCF、WebAPI、WCFREST、WebService、WPF之间的区别

    在.net平台下,有大量的技术让你创建一个HTTP服务,像Web Service,WCF,现在又出了Web API.在.net平台下,你有很多的选择来构建一个HTTP Services.我分享一下我对 ...