通过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 ...
随机推荐
- SpringBooot- 访问时，默认有弹出认证
SpringBooot- 访问时,默认有弹出认证 springboot启动成功后,访问请求时,默认弹出窗口,需登录认证. 原因: 是由于使用了springsecurity的默认安全策略,解决方案:启动 ...
- struts2-环境搭建-访问流程-配置详解-常量配置-类详解
1 struts2概述 1.1 概念 1.2 struts2使用优势 自动封装参数 参数校验 结果的处理(转发|重定向) 国际化 显示等待页面 表单的防止重复提交 struts2具有更加先进的架构以 ...
- MySQL用户权限详细汇总
1,MySQL权限体系 mysql 的权限体系大致分为5个层级:全局层级:全局权限适用于一个给定服务器中的所有数据库.这些权限存储在mysql.user表中.GRANT ALL ON .和REVOKE ...
- BZOJ2120&&2453 数颜色&&维护队列
2453: 维护队列 Time Limit: 10 Sec Memory Limit: 128 MB Submit: 1442 Solved: 678 [Submit][Status][Discuss ...
- Django项目：CRM(客户关系管理系统)--55--46PerfectCRM实现登陆后页面才能访问
#urls.py """PerfectCRM URL Configuration The `urlpatterns` list routes URLs to views. ...
- web前端学习（一） j2ee环境搭配+jsp中的编码问题
jsp中的编码问题 pageEncoding是jsp文件本身的编码 contentType的charset是指服务器发送给客户端时的内容编码 我安装tomcat的方法是 安装j2ee的eclipse ...
- ORACLE的Copy命令和create table,insert into的比较
在数据表间复制数据是Oracle DBA经常面对的任务之一,Oracle为这一任务提供了多种解决方案,SQL*Plus Copy 命令便是其中之一.SQL*Plus Copy 命令通过SQL*Net在 ...
- 字符串无法分割 split无效: java split（）使用“.” “\” "|" "*" "+"要转义
.是特殊字符 特殊字符需要转义. 改成split(“\\.”)
- npm ci命令比npm installer命令快2至10倍
npm 5.7.1的发布给我们带了一系列新的功能. 其中我最喜欢的就是npm ci命令了. npm ci命令 1.npm ci命令只根据lock-file去下载node_modules. 如果你的pa ...
- excel之VLOOKUP函数的使用
VLOOKUP 函数是excel中比较常用的一个函数.该函数具有有四个参数: 1.查找值:指本表中的值,需要根据本表中的某一值在本表或其他表中查找我们想要获取的值就称为查找值. 2.数据表:指查找的范 ...