通过JS操作CSS
动态效果如图所示： 
第一种实现方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript操作CSS:Style</title>
<style type="text/css">
li{
font-size: 12px;
color: #ffffff;
background-image: url(images/bg1.gif);
background-repeat: no-repeat;
height: 33px;
width:104px;
text-align: center;
line-height:38px;
list-style:none;
float:left;
}
</style>
<script type="text/javascript">
function changeBg1(currObj){
//style="background-image:url(images/bg2.gif)"
//CSS style属性 background-image属性
currObj.style.backgroundImage="url(images/bg2.gif)";
//JavaScript style对象 backgroundImage对象
currObj.style.color="yellow";
currObj.style.fontSize="20px"
}
function changeBg2(currObj){
currObj.style.backgroundImage="url(images/bg1.gif)";
currObj.style.color="#ffffff";
currObj.style.fontSize="12px"
} </script>
</head> <body>
<ul>
<li onmouseover="changeBg1(this)" onmouseout="changeBg2(this)" style="background-image:url(images/bg2.gif)">资讯动态</li>
<li onmouseover="changeBg1(this)" onmouseout="changeBg2(this)">产品世界</li>
<li onmouseover="changeBg1(this)" onmouseout="changeBg2(this)">市场营销</li>
</ul>
</body>
</html>
第二种实现方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript操作CSS:Style</title>
<style type="text/css">
li{
font-size: 12px;
color: #ffffff;
background-image: url(images/bg1.gif);
background-repeat: no-repeat;
height: 33px;
width:104px;
text-align: center;
line-height:38px;
list-style:none;
float:left;
}
</style>
<script type="text/javascript">
//匿名函数
//页面加载完调用
window.onload = function(){
var liArr = document.getElementsByTagName("li");
for(var i=0; i<liArr.length; i++){
//动态绑定事件
liArr.item(i).onmouseover = function(){
this.style.backgroundImage = "url(images/bg2.gif)";
this.style.color = "yellow";
this.style.fontSize = "20px";
}
liArr.item(i).onmouseout = function(){
this.style.backgroundImage = "url(images/bg1.gif)";
this.style.color = "#ffffff";
this.style.fontSize = "12px";
}
}
}
</script>
</head>
<body>
<ul>
<li >资讯动态</li>
<li>产品世界</li>
<li>市场营销</li>
</ul>
</body>
</html>
第三种实现方法：（推荐）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript操作CSS:Style</title>
<style type="text/css">
li{
font-size: 12px;
color: #ffffff;
background-image: url(images/bg1.gif);
background-repeat: no-repeat;
height: 33px;
width:104px;
text-align: center;
line-height:38px;
list-style:none;
float:left;
}
.over{
background-image:url(images/bg2.gif);
color:yellow;
font-size:20px;
}
.out{
background-image:url(images/bg1.gif);
color:#ffffff;
font-size:12px;
}
</style>
<script type="text/javascript">
//通过js操作css
window.onload = function(){
var liArr = document.getElementsByTagName("li");
for(var i=0; i<liArr.length; i++){
//动态绑定事件
liArr.item(i).onmouseover = function(){
this.className = "over";
}
liArr.item(i).onmouseout = function(){
this.className = "out";
}
}
} </script>
</head> <body>
<ul>
<li class="">资讯动态</li>
<li>产品世界</li>
<li>市场营销</li>
</ul>
</body>
</html>
通过JS操作CSS的更多相关文章
- JS操作css的float属性的特殊写法
使用js操作css属性的写法是有一定的规律的: 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.sty ...
- js操作css样式，null和undefined的区别？
1.js操作css的样式 div.style.width="100px"在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性, ...
- 11-13 js操作css样式
1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...
- js操作css样式、js的兼容问题
一.js操作css样式 div . style . width="200px" 在div标签内我们添加了一个style属性,并设定width值.这种写法会给标签带来大量的style ...
- js 操作css
类似于jquery的css()函数,js封装 CSS函数:css(oDiv , "width" , "200px ")设置样式css(oDiv , " ...
- JS操作CSS随机改变网页背景
今天有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图,当然我的回答是可以的.具体可以这样做: 1.用JS定义一个图片数组,里面存放你想要随机展示的图片 1 2 3 4 ...
- JS操作CSS样式
一.样式表(css) 使用样式表可以更好的显示WEB文档,也可以结合javascript从而实现很好的控制样式表. 样式(css)与内容(html): HTML是处理文档结构的,HTML可以实现如何把 ...
- JS操作css样式用法
//html <div id="div1" style="background:red;"> 修改背景颜色 </div> <but ...
- js操作css变量
原文:http://css-live.ru/articles/dostup-k-css-peremennym-i-ix-izmenenie-spomoshhyu-javascript.html :ro ...
随机推荐
- Luogu P1948 [USACO08JAN]电话线Telephone Lines(最短路+dp)
P1948 [USACO08JAN]电话线Telephone Lines 题意 题目描述 Farmer John wants to set up a telephone line at his far ...
- 02Redis入门指南笔记(基本数据类型)
一:热身 获得符合规则的健名列表:keys pattern pattern支持glob风格的通配符,具体规则如下表: Redis命令不区分大小写.keys命令需要遍历Redis中的所有健,当键的数量 ...
- 图片懒加载插件lazyload.js详解
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 【笔记】LR响应时间
事务:是指在客户端做一种或多种的业务所需要的操作集. 事务响应时间:是通过记录用户请求的开始时间和服务器返回内容到客户时间的差值来计算用户响应时间. 响应时间是服务器返回和用户请求之间的时间差,那么得 ...
- 【solr】schemaFactory配置相关schema.xml
schemaFactory配置相关schema.xml 关于schemaFactory的配置困扰我半天啦,下面来总结一下. 话说,好像是从5.0以后就已经没有schema.xml啦,这是由于Solr ...
- 学习JDK1.8集合源码之--HashMap
1. HashMap简介 HashMap是一种key-value结构存储数据的集合,是map集合的经典哈希实现. HashMap允许存储null键和null值,但null键最多只能有一个(HashSe ...
- LINNX查看当前登录的用户
W w命令主要是查看当前登录的用户,这个命令相对来说比较简单.我们来看一下截图. 在上面这个截图里面呢,第一列user,代表登录的用户,第二列,tty代表用户登录的终端号,因为在linux中并不是只有 ...
- spring源码学习之默认标签的解析（一）
继续spring源码的学习之路,现在越来越觉得这个真的很枯燥的,而且我觉得要是自己来看源码,真的看不下去,不是没有耐心,而是真的没有头绪,我觉得结合着书来看,还是很有必要的,最起码大致的流程是能够捋清 ...
- HDU 1536 求解SG函数
#include<stdio.h> #include<string.h> #include<algorithm> #include<set> using ...
- AndroidStudio离线打包MUI
1.下载5+SKD http://ask.dcloud.net.cn/article/103 2.解压到任意目录 3.导入HBuilder-Hello项目 4.在AndroidManifest.xml ...