通过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 ...
随机推荐
- SSH免密登录设置
******配置主机之间的免密ssh登陆 假如 A 要登陆 B 在A上操作: (1)首先生成密钥对 ssh-keygen (提示时,直接回车即可) (2)再将A自己的公钥拷贝并追加到B的授权列 ...
- IDEA工具实现反编译操作
1.File - Settings... 2.在搜索框中输入“byte” - 勾选 Java Byte code Decompiler选项 点击 OK 键 3.弹出重启IDEA的选择框 选择“rest ...
- poj 3304 Segments（计算直线与线段之间的关系）
Segments Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10921 Accepted: 3422 Descrip ...
- laravel-admin 报错 Disk [admin] not configured, please add a disk config in `config/filesystems.php`.
在config/filesystems.php中添加: 'disks' => [ 'local' => [ 'driver' => 'local', 'r ...
- 读书笔记--Head First Python 目录
1.初识python 2.共享你的代码 3.文件与异常 4.持久共享 5.推导数据 6.定制数据对象 7.web开发 8.移动应用开发 9.管理你的数据 10.扩展你的web应用 11.处理复杂性 其 ...
- java-多线程的练习----妖,等待唤醒,代码重构,lock到condition
1 需求 资源有姓名和性别. 两个线程, 一个负责给姓名和性别赋值, 一个负责获取姓名和性别的值. 要求1,运行一下,解决程序的 "妖"的问题. 要求2,实现正确数据的 ...
- JS常用属性方法大全
1. 输出语句 : document.write(""); 2.JS 中的注释为 : // 3. 传统的 HTML 文档顺序是 : document->html->(h ...
- spring源码学习之默认标签的解析（一）
继续spring源码的学习之路,现在越来越觉得这个真的很枯燥的,而且我觉得要是自己来看源码,真的看不下去,不是没有耐心,而是真的没有头绪,我觉得结合着书来看,还是很有必要的,最起码大致的流程是能够捋清 ...
- js的各种获取大小
相信大家也经常会被js的获取大小搞得头昏脑胀,到底应该用哪种方式获取才是我要的那种大小呢 好啦,在此我帮大家整理好我知道的那些. window.screen.availHeight 获取的是当前电脑 ...
- 【笔记】http协议笔记
本文是本人在复习http协议时,手动整理的资料,以备后续查阅. http(hypertext transfer protocol):超文本协议.是万维网(world wide web,www,也简称为 ...