通过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 ...
随机推荐
- 简单linux查询
1查看日志异常 tailf nohup.out|grep ERROR -A 3 --color tailf nohup.out|grep ERROR|grep chunk -A 3 -B 3 -- ...
- Luogu P4503 [CTSC2014]企鹅QQ(字符串哈希)
P4503 [CTSC2014]企鹅QQ 题面 题目背景 \(PenguinQQ\) 是中国最大.最具影响力的 \(SNS(Social Networking Services)\) 网站,以实名制为 ...
- [转]js作用域系列——内部原理
前面的话 javascript拥有一套设计良好的规则来存储变量,并且之后可以方便地找到这些变量,这套规则被称为作用域.作用域貌似简单,实则复杂,由于作用域与this机制非常容易混淆,使得理解作用域的原 ...
- 数组的方法之(Array.prototype.reduce() 方法)
reduce函数 reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值. 对数组中的所有元素调用指定的回调函数.该回调函数的返回值为累积结果,并且此返回值在下一次 ...
- idea中HTML格式化时标签缩进问题
在IntelliJ Idea中HTML格式化时,默认<head><body>以及<body>下的以及标签都不会缩进. 解决方法:editor->code st ...
- 锋利的JQuery学习之JQuery中的事件
一.加载DOM 在页面加载完毕之后,浏览器会通过javascript为dom元素添加事件,在常规的javascript中使用window.onload方法,而在jQuery中使用的是$(documen ...
- MySQL语句错误及解决方案
1.group by查询错误 ERROR 1055 (42000): Expression #1 of SELECT list is not in GROUP BY clause and contai ...
- SELECT (@i :=@i + 1)生成序列号
转载自https://blog.csdn.net/qq_27922171/article/details/86477544 同类别自动生成序列号:https://bbs.csdn.net/topics ...
- 2019.7.27 NOIP模拟测试9 反思总结
先来整理题目 T1题目大意:给出n个数字和一个质数作为模数,一个变量x初始值为1.进行m次操作,每次让x随机乘上n个数中的一个,问m次操作以后x的期望值. 答案一定可以用分数表示,输出分子乘分母逆元的 ...
- spark应用程序引用别的jar包
第一种方式 操作:将第三方jar文件打包到最终形成的spark应用程序jar文件中 应用场景:第三方jar文件比较小,应用的地方比较少 第二种方式 操作:使用spark-submit提交命令的参数: ...