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. JQuery的过滤选择器

    1.eg(num):查找索引num位置的元素,索引从0开始. 2.lt(num):查找索引小于num位置的元素,索引从0开始. 3.gt(num):查找索引大于num位置的元素,索引从0开始. 示例: ...

  2. PHP的$_SERVER['HTTP_HOST']获取服务器地址功能详解

    uchome的index文件中的二级域名功能判断,使用了php的$_SERVER['HTTP_HOST'],开始对这个不是很了解,所以百度了一下,发现一篇帖子有点意思,转发过来做个记录. 在php中, ...

  3. 設定 Bootstrap/SASS/Bower/gulp (Windows平台)

    請注意:在進行以下步驟前,你會需要先安裝git,可以參考這篇 git安裝教學 前言 時至今日,幾乎每個人都在討論bootstrap.less 或 sass.我們知道它們是比較新的前端技術,而且有開始愈 ...

  4. Spark Streaming揭秘 Day26 JobGenerator源码图解

    Spark Streaming揭秘 Day26 JobGenerator源码图解 今天主要解析一下JobGenerator,它相当于一个转换器,和机器学习的pipeline比较类似,因为最终运行在Sp ...

  5. 实现Linux select IO复用C/S服务器代码

    已在ubuntu 下验证可用 服务器端 #include<stdio.h>#include<unistd.h>#include<stdlib.h>#include& ...

  6. Java 多线程 简单实例 （消费者与生成者）的关系

    PS::线程这套东西在PHP里完全是不存在的概念,有待进一步的学习: PS::这个实例是根据书本上的知识进行扩展的,理解程度50%左右吧! 1.定义生产消费环境 package second; pub ...

  7. 【socket】TCP 和 UDP 在socket编程中的区别

    一.TCP与UDP的区别 基于连接与无连接  对系统资源的要求(TCP较多,UDP少)  UDP程序结构较简单  流模式与数据报模式  TCP保证数据正确性,UDP可能丢包  TCP保证数据顺序,UD ...

  8. 【BZOJ 2875】 [Noi2012]随机数生成器

    Description  给你6个数,m, a, c, x0, n, g Xn+1 = ( aXn + c ) mod m,求Xn m, a, c, x0, n, g<=10^18 Input ...

  9. c# DirectoryInfo类 详解

    DirectoryInfo类和Directory类之间的关系与FileInfo类和File类之间的关系十分类似.下面介绍一下DirectoryInfo类的常用属性. DirectoryInfo类的常用 ...

  10. JAVA多线程synchronized详解

    Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 当两个并发线程访问同一个对象object中的这个synchronized(this)同 ...