js和css控制鼠标略过和点击后的样式
2013-01-13 15:57
579 查看
<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.myexception.cn/HTML-CSS/855448.html
http://www.mayixueyuan.com/UploadFile/file/js_all/20110714_js_div_class/20110709_js_div_class.html
相关文章推荐
- CSS控制鼠标样式
- css中控制鼠标手型的属性(以及js控制)
- CSS和JS结合控制样式
- CSS和JS结合控制样式
- 【js】鼠标点击切换样式
- js+css控制弹出小窗口之后,后整个页面背景图变色,并且不可操作,点击确定,页面跳转。。。
- 用css控制鼠标样式
- CSS样式控制实现IE提交表单记录历史点击返回信息仍在
- JS+CSS控制鼠标移上图片滑出文字提示代码
- 用JS控制CSS基本样式
- css控制表格样式 鼠标经过变色效果
- css 控制鼠标显示样式
- 用JS控制CSS基本样式
- JS+CSS控制左右切换鼠标可控的无缝图片滚动代码
- js控制不同的时间段显示不同的css样式
- 【CSS控制鼠标样式cursor】
- js控制td悬浮和点击时的样式
- css的hover事件,如果点击之后通过js操作样式,hover事件就会失效的处理方法,外部css样式与js的DOM样式谁的权重高?
- JS控制鼠标拒绝点击某一按钮的实例
- jquery实现隔行变色,点击换色,鼠标悬浮当前行变色效果,div+css 细表格样式