1.易错:修改元素的样式不是设置class属性，而是className属性.class是JS的一个保留关键字。

2.易错:单独修改样式的属性使用"style.属性名"
3.注意在css中属性名和在javaScript中

   操作的时候属性名可能不一样，主要集中在那些属性名中含有-的属性，因为javaScript中-是不能做属性，类名的。所以在CSS中背景色是background-clolor,而javaScript中则是style.background;
4.元素样式名是class，在javaScript中是className属性

 1.举例1

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>动态修改style</title>

    <style type="text/css">

        .day

        {

            background-color:Green;

        }

        .night

        {

            background-color:Black;

        }

    </style>

    <script type="text/javascript">

        function dayclick() {

            var divMain = document.getElementById("divMain");

            //注意这里使用的是className而不是class

            divMain.className = "day";

        }

        function nightclick() {

            var divMain = document.getElementById("divMain");

            divMain.className = "night";

        }

    </script>

</head>

<body>

    <div id="divMain" class="day">

        <font color="red">中华人名共和国</font>

    </div>

    <input type="button" value="白天" onclick="dayclick()" />

    <input type="button" value="黑夜" onclick="nightclick()" />

</body>

</html>

2.举例2   动态修改style(模拟开灯，关灯)

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

        .day

        {

            background-color:White;

        }

        .night

        {

            background-color:Black;

        }

    </style>

    <script type="text/javascript">

        function switchLight() {

            var btnSwitch = document.getElementById("btnSwitch");

            if (document.body.className == "day") {

                document.body.className = "night";

                btnSwitch.value = "开灯";

            }

            else {

                document.body.className = "day";

                btnSwitch.value = "关灯";

            }

        }

    </script>

</head>

<body class="night">

    <input type="button" value="开灯" id="btnSwitch" onclick="switchLight()" />

</body>

</html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>动态设置style练习(修改文本框背景色)</title>

    <script type="text/javascript">

        function IniEvents() {

            var inputs = document.getElementsByTagName("input");

            for (var i = 0; i < inputs.length; i++) {

                if (inputs[i].type == "text") {

                    //设置txtOnBlur函数为input元素的onblur事件的响应函数

                    inputs[i].onblur = txtOnBlur;

                }

            }

        }

        function txtOnBlur() {

            /*

                txtOnBlur是onblur的响应函数，而不是被响应函数调用

                的函数，所有可以用this来取的发生事件控件的对象

            */

            if (this.value.length <= 0) {

                this.style.background = "red";

            }

            else {

                this.style.background = "white";

            }

        }

    </script>

</head>

<body onload="IniEvents()">

    <input type="text" /><br />

    <input type="text" /><br />

    <input type="text" /><br />

    <input type="text" /><br />

    <input type="text" /><br />

    <input type="text" /><br />

</body>

</html>
<html>

<head>

<title>className属性使用实例</title>

<style>

.one{

border:1px solid;

width:200px;

height:300px;

background:#eeefff;

}

.two{

border:1px solid;

width:300px;

height:350px;

background:#efefef;

}

</style>

</head>

<body>

<div id="a">这是a元素,默认没有指定任何显示方式,点击下面按扭为其添加一个样式</div>

<input type="button" value="添加样式" onclick="add_class()"/>

<div id="b" class="one">这是b元素，已经指定了一个样式，可以点击下面按扭更改其外观</div>

<input type="button" value="更改外观" onclick="up_class()"/>

</body>

<script language="javascript">

function add_class(){

var a = document.getElementById("a");

a.className = "one";

}

function up_class(){

var b = document.getElementById("b");

b.className = "two";

}

</script>

</html>

JavaScript动态操作style的更多相关文章

  1. Javascript动态创建 style 节点

    有很多提供动态创建 style 节点的方法,但是大多数都仅限于外部的 css 文件.如何能使用程序生成的字符串动态创建 style 节点,我搞了2个小时. 静态外部 css 文件语法: @import ...

  2. javascript 动态操作Html

    <html> <body> <p>aaaaa</p> <input type="button" value="con ...

  3. Javascript动态操作CSS总结

    一.使用js操作css属性的写法 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left ...

  4. js实现动态操作table

     本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType=&quo ...

  5. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  6. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  7. js动态创建style节点(js文件中添加css)

    ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 --------------------- 有很多提供动态创建 ...

  8. 用Javascript动态添加删除HTML元素实例 (转载)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Javascript动态调整文章的行距、字体、颜色，及打印页面和关闭窗口功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 使用Mybatis Generator 生产 AS400中的数据表对象

    第一次使用Mybatis,由于公司核心服务器是AS400,参考了网络各个大大的教程后,发现无法使用Mybatis Generator自动生成AS400中的表对象 参考URL: http://www.c ...

  2. 《APUE》第七章笔记

    这一章主要是要解决这么几个问题: 当执行程序时,main函数是如何被调用的? main函数的原型是: int main(int argc, char *argv[]); 其中argc是命令个数,arg ...

  3. This bison version is not supported for regeneration of the Zend/PHP parsers

    在 mac 中编译 php-src.git 报错: configure: WARNING: This bison version is not supported , excluded: ). con ...

  4. 如何查看Oracle的用户权限

    ORACLE数据字典视图的种类分别为:USER,ALL 和 DBA. USER_*:有关用户所拥有的对象信息,即用户自己创建的对象信息 ALL_*:有关用户可以访问的对象的信息,即用户自己创建的对象的 ...

  5. 利用javascript调用摄像头，可以配合socket开发监控系统

    <html> <head> <meta http-equiv="content-type" content="text/html; char ...

  6. php正确解码javascript中通过escape编码后的字符

    js的escape如何在PHP中来解呢? 下面的这个函数可以正确的解析,网上有不少unescape的函数,但好用的不多. 这是很久以前收集的一个,不知道谁写的了,但经过测试没有问题~ function ...

  7. try、catch、finally的使用分析---与 return 相关

    看了一篇文章,讲解的是关于java中关于try.catch.finally中一些问题 下面看一个例子(例1),来讲解java里面中try.catch.finally的处理流程   1 2 3 4 5 ...

  8. phpstorm运行在浏览器中执行php文件报502错误

    原因是之前mac自带的php5.5版本被我升级到了5.6 通过phpinfo()查看到目前php5.6的安装目录 重新制定一些interpreter的路径 /usr/local/php5/bin 就可 ...

  9. visio

    为您的产品密钥: 7DNWX-MRX4G-QCGX2-DG6BP-DC8RP   http://technet.microsoft.com/zh-cn/evalcenter/hh973399.aspx ...

  10. shell复习笔记----入门知识

    Unix 简史 UNIX 最初是由贝尔实验室(Bell Telephone Laborataries)的计算机科学研究中心开发的,第一版诞生于1970年--也就是在贝尔实验室退出Multics项目不久 ...