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. MSDN 2005 安装问题

    在安装玩Visual Studio  MSDN 2005时,经常会出现这种问题:“无法显示 Microsoft 文档资源管理器,因为指定的帮助集合“ms-help://MS.MSDNQTR.v” 网上 ...

  2. Java多线程(三) 多线程间的基本通信

    多条线程在操作同一份数据的时候,一般需要程序去控制好变量.在多条线程同时运行的前提下控制变量,涉及到线程通信及变量保护等. 本博文主要总结:①线程是如何通信  ②如何保护线程变量 1.Java里的线程 ...

  3. 玩转Slot Machine

    最近在做一个有关Slot  Machine小游戏的开发,其中遇到了不少的坑,现将个人遇到的问题总结如下,希望今后对大家开发的过程中有所的帮助. 这个项目是部署到微信朋友圈广告的,两天时间,PV就有14 ...

  4. $设置背景图片的css

    $('.d-game-pic').css('background-image', 'url(' + App.getImg(gameDetail.desc_pic) + ')');

  5. mysql中的if条件语句用法

    · IF(expr1,expr2,expr3) 如果 expr1 是TRUE (expr1 <> 0 and expr1 <> NULL),则 IF()的返回值为expr2;  ...

  6. phpcms V9静态判断会员登录状态的方法

    phpcms v9如何在任意地方判断会员的登录状态呢?在php中是比较好判断的,代码如下 <?php if (!$_userid){ echo"会员没有登录"; }else ...

  7. JavaScript的常见事件和Ajax小结

    一.常见事件类型 1.鼠标事件 事件名称 说明 onclick 鼠标单击时触发 ondbclick 鼠标双击时触发 onmousedown 鼠标左键按下时触发 onmouseup 鼠标释放时触发 on ...

  8. 《WPF程序设计指南》读书笔记——第4章 按钮与其他控件

    1.Button类 using System; using System.Windows; using System.Windows.Media; using System.Windows.Input ...

  9. 统计网卡TX（发送）RX（接受）流量脚本

    显示网卡流量的方法蛮多,一般我们可以通过dstat来查看,但dstat不一定所有的机器都有安装.而我们知道,通过ifconfig可以看到某一网卡发送与接收的字节数,所以我们可以写一个脚本来统计一下. ...

  10. 【linQ】DataContext 入门 , 和 hql , jpql 一样好用

    DataContext 和 LINQ结合后会有巨大的能量 public class UserDataContext : DataContext { public Table<User> U ...