js和css控制鼠标略过和点击后的样式
源：http://blog.csdn.net/xn4545945/article/details/8498272
评：
一、js和css控制鼠标略过和点击后的样式
刚没注意你还要滑过的效果 以下是全部效果 其实思路都是一样 只是绑定的事件不一样而已
////////////////////////////////////////////////////////////////////////////////////
- <script language="javascript">
- document.onreadystatechange=function() //当页面状态改变时执行函数
- {
- if(document.readyState == "complete") //当页面加载状态为完成时执行条件内容
- {
- var li = document.getElementsByTagName("li"); //获取页面所有li节点
- for(var i=0;i<li.length;i++) //循环li节点
- {
- li[i].onclick=function(){ //为循环的li节点绑定 onclick事件
- for(var j=0;j<li.length;j++)
- {
- li[j].style.backgroundColor="#FFF"; //将所有li背景颜色修改
- this.style.backgroundColor="#C0F"; //将当前点击的li背景颜色修改
- }
- }
- }
- }
- }
- </script>
- <ul>
- <li>測試1</li>
- <li>測試2</li>
- <li>測試3</li>
- <li>測試4</li>
- <li>測試5</li>
- <li>測試6</li>
- </ul>
刚没注意你还要滑过的效果 以下是全部效果 其实思路都是一样 只是绑定的事件不一样而已
////////////////////////////////////////////////////////////////////////////////////
- <script language="javascript">
- document.onreadystatechange=function() //当页面状态改变时执行函数
- {
- if(document.readyState == "complete") //当页面加载状态为完全结束时进入
- {
- var li = document.getElementsByTagName("li");
- for(var i=0;i<li.length;i++)
- {
- li[i].onclick=function(){ //为循环的li节点绑定 onclick事件 也就是点击事件
- for(var j=0;j<li.length;j++)
- {
- li[j].style.backgroundColor="#FFF";
- this.style.backgroundColor="red";
- }
- }
- li[i].onmousemove=function(){ //为循环的li节点绑定onmousemove事件也就是鼠标移上事件
- for(var j=0;j<li.length;j++)
- {
- if(this.style.backgroundColor != "red") //这里就判断改li标签是否被点击 如果点击就不改变颜色
- {
- this.style.backgroundColor="#C0F";
- }
- }
- }
- li[i].onmouseout=function(){ ///为循环的li节点绑定onmouseout事件也就是鼠标移走事件
- for(var j=0;j<li.length;j++)
- {
- if(this.style.backgroundColor != "red") //这里就判断改li标签是否被点击 如果点击就不改变颜色
- {
- this.style.backgroundColor="#FFF";
- }
- }
- }
- }
- }
- }
- </script>
- <ul>
- <li>測試1</li>
- <li>測試2</li>
- <li>測試3</li>
- <li>測試4</li>
- <li>測試5</li>
- <li>測試6</li>
- </ul>
二、js改变div的样式,getElementById()语法实例
今天为大家讲解：js改变div的样式,getElementById()语法实例!
样式表设置如下：
- <style>
- body{font-size:12px; padding-top:32px;}
- div{width:600px; text-align:center; margin:0px auto; height:42px;}
- .c1{border:1px solid blue;}
- .c2{border:1px solid #ff0000;}
- </style>
js代码如下：
- <script>
- function get1()
- {
- document.getElementById("div1").classname="div c1";
- }
- function get2()
- {
- document.getElementById("div1").classname="div c2";
- }
- </script>
网页内容如下：
- <div id="div1">
- </div>
- <br />
- <div>
- <input type="button" value="边框蓝色" onclick="get1()" />
- <input type="button" name="button" id="button" value="边框红色" onclick="get2()" />
- </div>
主要通过 getElementById()改变Div的样式属性，从代码中已经很直观表现出来了。
点击按钮 边框蓝色，调用 Get1()函数，改变Div1的样式属于为“div c1”，这样子就可以实现通过Js改变Div的颜色，
同样原理可以应用到其它属性上。
http://www.mayixueyuan.com/UploadFile/file/js_all/20110714_js_div_class/20110709_js_div_class.html
相关推荐
NARUTOLUOLUO 2020-08-03
jiedinghui 2020-10-25
Ladyseven 2020-10-22
zuncle 2020-09-28
xiaohuli 2020-09-02
葉無聞 2020-09-01
nicepainkiller 2020-08-20
AlisaClass 2020-08-09
myloveqiqi 2020-08-09
buttonChan 2020-08-02
drdrsky 2020-07-29
Ladyseven 2020-07-25
nicepainkiller 2020-07-24
AlisaClass 2020-07-19
hellowzm 2020-07-19
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT
昔人已老 2020-07-19
骆驼的自白 2020-07-18
lanzhusiyu 2020-07-19
hellowzm 2020-07-19