JavaScript动态操作style
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的更多相关文章
- Javascript动态创建 style 节点
有很多提供动态创建 style 节点的方法,但是大多数都仅限于外部的 css 文件.如何能使用程序生成的字符串动态创建 style 节点,我搞了2个小时. 静态外部 css 文件语法: @import ...
- javascript 动态操作Html
<html> <body> <p>aaaaa</p> <input type="button" value="con ...
- Javascript动态操作CSS总结
一.使用js操作css属性的写法 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left ...
- js实现动态操作table
本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType=&quo ...
- javascript DOM 操作基础知识小结
经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC ...
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
- js动态创建style节点(js文件中添加css)
ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 --------------------- 有很多提供动态创建 ...
- 用Javascript动态添加删除HTML元素实例 (转载)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Javascript动态调整文章的行距、字体、颜色,及打印页面和关闭窗口功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 使用JPA TOOLS从数据库生成Entity文件
数据库设计好后,需要生成对应的Entity文件,这是一项不怎么需要动脑筋的工作,最好的方法是交给工具完成,手工操作很容易写错或者遗漏.这里选择的工具就是JPA TOOLS. (1)先选中工程,查看右键 ...
- python学习之socket创建html服务器
#coding:utf-8 import socket def process_request(request): request.recv(1024)#读取接受的字节 request.send(&q ...
- Nagios脚本编写事例
目标:编写一个简单的nagios脚本,实现监控client上的nginx进程是否启动,假如没启动的话发出报警. 首先在master上对nagios的配置文件进行设置,修改services.cfg文件, ...
- Eclipse开发Android报错Jar mismatch! Fix your dependencies
常常打开工程,发现项目并没有错,但是会有一个红X,然后就生成不了. 发现两个版本不同的android-support-v4.jar在使用 打开window-show views-problems Ja ...
- 【ibatis】cachemodel、属性 及特殊配置
http://www.cnblogs.com/13590/archive/2013/03/01/2938126.html <?xml version="1.0" encodi ...
- EXTJS 4.2 资料 控件之checkboxgroup的用法(静态数据)
1.页面 1.1点击‘横幅’,需要动态显示隐藏文本框 { xtype: 'fieldset', title: '指定附加图&横幅设置', collapsible: true, items: [ ...
- 微软职位内部推荐-SDE II-MODC-Beijing
微软近期Open的职位: JOB TITLE: Software Design Engineer IIDEPARTMENT: Microsoft Office Division ChinaIMMEDI ...
- sql shard/partition
sql http://www.infoq.com/news/2011/02/SQL-Sharding/ http://channel9.msdn.com/Shows/Data-Exposed/SqlD ...
- MyBatis定义复合主键
<resultMap type="XX" id="XXMap"> <id property="id" column=& ...
- 线形,柱形,条形数据表(百度Echart插件)
[获取资源]进入官网, http://echarts.baidu.com/导航,下载,下拉框下载,常用303k.就是这么简单,就个一个js.[项目使用]新建项目,MyChart具体使用的过程中, ...