通过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 ...
随机推荐
- retrying模块的使用
安装模块:pip3 install retrying 使用方式: 使用retrying模块提供的retry模块 通过装饰器的方式使用,让装饰器的函数反复的执行 retry可以传入参数stop_max_ ...
- jquery学习：选择器&dom操作
分类; 1.基本选择器 1.标签选择器(元素选择器) * 语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 * 语法:$("#id的属性值" ...
- 请问Pycharm如何实现变量的批量重命名？
1.点击你要改的单词,右键refactor ->rename 2. Ctrl + R 替换 Ctrl + Shift + F 全局查找 Ctrl + Shift + R 全局替换
- Luogu P3960 列队(动态开点线段树)
P3960 列队 题意 题目描述 Sylvia 是一个热爱学习的女孩子. 前段时间,Sylvia 参加了学校的军训.众所周知,军训的时候需要站方阵. Sylvia所在的方阵中有\(n \times m ...
- Web应用托管服务（Web+）隐藏的十个上云最佳姿势
随着云计算浪潮的推进,技术架构云化已经成为大势所趋.特别是最近由CNCF推动的云原生概念,将符合云原生标准的各种开源技术方案推向了前所未有的高度.在这一波浪潮的推动下,越来越多的企业开始了自身的数字化 ...
- ubuntu中vi下删除键和上下左右键输入字符异常（ABCD）
刚安装的Ubuntu系统,使用vi编辑文本的时候, 出现以下现象: 点删除键输入了 D 回车无效 上下左右为字母 光标乱跳 原因: 自带的vi功能问题 解决: 卸载原有vi,重新安装完整版本vim 执 ...
- 你不知道的javascript -- 数据类型
1. 数据类型 在js中有7中数据类型 其中6种是基本类型 包括 null, undefined, boolean, number, string和symbol,还有一种是引用类型object 但是判 ...
- 前言-使用Eclipse创建SpringBoot项目
1.首先我们需要安装STS插件:Help--> Eclipse Marketplace 2. 然后 File-->New--->Spring Starter Project 3.下 ...
- SSM三大框架整合教程
前言 SSM就是Spring+SpringMvc+Mybatis,本文搭建一个基本的ssm框架 本文所有源代码包含jar包下载点击:https://download.csdn.net/download ...
- Jboss配置HTTPS
配置jboss的HTTP请求走SSL(HTTPS协议) l 生成keystore 文件 用keytool生成server.keystore文件: 进入命令行 C:\Documents ...