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. Access数据库一种树形结构的实现和子节点查询

    BOOL CManageDataBase::GetDepTreeAllSons( int rootItem ) { CADORecordset Rst(&m_DataBase); BOOL b ...

  2. L007-oldboy-mysql-dba-lesson07

    L007-oldboy-mysql-dba-lesson07 [root@web01 ~]# mysqldump -uroot -ptestpassword -A >/root/mysql_ba ...

  3. 什么是MBR？(含图解)

    Mbr位于磁盘的0柱面,0磁头,1扇区. MBR       有三部分构成,主引导程序,硬盘分区表DPT和,硬盘的有效标志55AA.在512个字节的主引导扇区里. 主引导程序占446个字节,dpt占6 ...

  4. vi 技巧

    :%s/^/\//   行首加 / :%s/$/\//    行尾加/ :%s/^\///g   行首减 / :%s/\/$//g   行尾减/ :%s/^\s*//g  行首减 空格   

  5. 汇编语言-打印部分ASCII表

    用表格形式显示字符 1． 题目:用表格形式显示ASCII字符 2.要求:按15行×16列的表格形式显示ASCII码为10H-100H的所有字符,即以行为主的顺序及ASCII码递增的次序依次显示对应的字 ...

  6. AngularJS(6)-选择框Select

    1.在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出 <!DOCTYPE html> <html lang=" ...

  7. Ubuntu 12.04 安装sougou for linux

    安装sougou for linux: 1.卸载原有的输入法,fcitx或ibus.如卸载fcitx: sudo apt-get remove fcitx*(如不需保留配置文件用purge) sudo ...

  8. Catalyst揭秘 Day3 sqlParser解析

    Catalyst揭秘 Day3 sqlParser解析 今天我们会进入catalyst引擎的第一个模块sqlparser,它是catalyst的前置模块. 树形结构 从昨天的介绍我们可以看到sqlPa ...

  9. Python 信号量

    信号的概念 信号(signal)--     进程之间通讯的方式,是一种软件中断.一个进程一旦接收到信号就会打断原来的程序执行流程来处理信号. 几个常用信号: SIGINT     终止进程  中断进 ...

  10. C++ 关联容器详解——从内部结构到应用

    关联容器不同于顺序容器的是:顺序容器底层用数组实现,为线性结构:关联容器在实现中,用到的非线性存储方式: 顺序容器是通过元素在容器中的位置顺序存储和访问元素,而关联容器是通过键(key)存储和读取元素 ...