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. 使用轻量级Spring @Scheduled注解执行定时任务

    WEB项目中需要加入一个定时执行任务,可以使用Quartz来实现,由于项目就一个定时任务,所以想简单点,不用去配置那些Quartz的配置文件,所以就采用了Spring @Scheduled注解来实现了 ...

  2. mysql中的count(primary_key)、count(1)、count(*)的区别

    表结构如下: mysql> show create table user\G; *************************** 1. row ********************** ...

  3. ubuntu grub 引导修复

    作者:jostree 转载请注明出处 http://www.cnblogs.com/jostree/p/4167644.html   (1) 先使用ls命令,找到Ubuntu的安装分区: 在 grub ...

  4. color 颜色代码 android res/values/colors.xml

    <?xml version="1.0" encoding="utf-8"?> <resources> <color name=&q ...

  5. qml自定义标题栏

    要实现自定义的标题栏只需在原来的窗口的基础上创建一个Rectangle并将其定位在窗口顶部即可,实现代码如下: ApplicationWindow { id: mainWindow visible: ...

  6. C#委托的异步调用1

    本文将主要通过“同步调用”.“异步调用”.“异步回调”三个示例来讲解在用委托执行同一个“加法类”的时候的的区别和利弊. 首先,通过代码定义一个委托和下面三个示例将要调用的方法: /*添加的命名空间 u ...

  7. IO笔记

    Java流操作有关的类或接口: Java流类图结构: 1.文件操作时,注意要使用File.separator来代替/分隔符实现跨平台 2.RandomAccessFile类并不是流体系中的一员,但常用 ...

  8. CCNP第三天 EIGRP综合实验

    实验题如图所示:其中R2连R3 R5为快速以太网线,其他均为串线,帧中继默认是富曼斯(全连网状结构),即所有接入的路由之间的PVC都已经打通,所有  要关闭R5和R8的逆向arp功能,来手工配置R5到 ...

  9. hdu 5343 MZL's Circle Zhou SAM

    MZL's Circle Zhou 题意:给定两个长度不超过a,b(1 <= |a|,|b| <= 90000),x为a的连续子串,b为y的连续子串(x和y均可以是空串):问x+y形成的不 ...

  10. 【git】学习路径失败了

    期初规划:搭建git远程服务器  使用gitlab作为管理工具 过程遇到的问题 1.gitlab不能安装到win ,且对centos要求6以上,我只有一台centos5  让运维帮升级 ...等待.. ...