js改走形式_读书人

js改变样式

JScript code

&lt;script type="text/javascript"&gt;    function yanse(){                        document.getElementById('picture').style.backgroundColor = '#f8f8f8';            document.getElementById('picture').style.border = '1px solid #00a2ff';        }    function old(){            document.getElementById('picture').style.backgroundColor = '#f1f1f1';            document.getElementById('picture').style.border = '1px solid #D7D7D7';        }&lt;/script&gt;

HTML code

&lt;ul class="photos clearfix"&gt;        &lt;li&gt;            &lt;div class="picture" id="picture" onMouseOver="yanse()" onMouseOut="old()"&gt;&lt;span&gt;&lt;/span&gt;&lt;a href="#"&gt;&lt;img src="photo_1.jpg"&gt;&lt;/a&gt;&lt;/div&gt;            &lt;div class="name"&gt;&lt;a href="#"&gt;图片1&lt;/a&gt;&lt;/div&gt;        &lt;/li&gt;        &lt;li&gt;            &lt;div class="picture"&gt;&lt;span&gt;&lt;/span&gt;&lt;a href="#"&gt;&lt;img src="photo_2.jpg"&gt;&lt;/a&gt;&lt;/div&gt;            &lt;div class="name"&gt;&lt;a href="#"&gt;图片2&lt;/a&gt;&lt;/div&gt;        &lt;/li&gt;        &lt;li&gt;            &lt;div class="picture"&gt;&lt;span&gt;&lt;/span&gt;&lt;a href="#"&gt;&lt;img src="photo_3.jpg"&gt;&lt;/a&gt;&lt;/div&gt;            &lt;div class="name"&gt;&lt;a href="#"&gt;图片3&lt;/a&gt;&lt;/div&gt;        &lt;/li&gt;        &lt;li&gt;                       &lt;div class="picture"&gt;&lt;span&gt;&lt;/span&gt;&lt;a href="#"&gt;&lt;img src="photo_4.jpg"&gt;&lt;/a&gt;&lt;/div&gt;            &lt;div class="name"&gt;&lt;a href="#"&gt;图片4&lt;/a&gt;&lt;/div&gt;        &lt;/li&gt;&lt;/ul&gt;

页面中id是惟一的，如果其他的class为picture的盒子使用这个函数的时候，需要命名为其他的id，在实际项目中运用太麻烦，怎么样才能达到当鼠标在任意一个class为picture的盒子上时，就改变背景色和边框颜色呢？

[解决办法]

HTML code

&lt;script type="text/javascript"&gt;window.onload = function() {    var ul = document.getElementsByTagName('ul');    for (var i = 0; i &lt; ul.length; i ++) {        if (ul[i].className.indexOf('photos') != -1) {            var obj = ul[i].getElementsByTagName('div');            for (var j = 0;j &lt; obj.length; j ++) {                if (obj[j].className == 'picture') {                    obj[j].onmouseover = function() {                        this.style.backgroundColor = '#f8f8f8';                        this.style.border = '1px solid #00a2ff';                    }                    obj[j].onmouseout = function() {                        this.style.backgroundColor = '#f1f1f1';                        this.style.border = '1px solid #D7D7D7';                    }                }            }        }    }}&lt;/script&gt;
[解决办法]
HTML code&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt;  &lt;title&gt; new document &lt;/title&gt; &lt;/head&gt; &lt;script type="text/javascript"&gt;    function yanse(obj){                     obj.style.backgroundColor = '#f8f8f8';            obj.style.border = '1px solid #00a2ff';        }    function old(obj){            obj.style.backgroundColor = '#f1f1f1';            obj.style.border = '1px solid #D7D7D7';        } &lt;/script&gt; &lt;body&gt;  &lt;ul class="photos clearfix"&gt;        &lt;li&gt;            &lt;div class="picture" id="picture" onMouseOver="yanse(this)" onMouseOut="old(this)"&gt;&lt;span&gt;&lt;/span&gt;&lt;a href="#"&gt;&lt;img src="photo_1.jpg"&gt;&lt;/a&gt;&lt;/div&gt;            &lt;div class="name"&gt;&lt;a href="#"&gt;图片1&lt;/a&gt;&lt;/div&gt;        &lt;/li&gt;        &lt;li&gt;            &lt;div class="picture" onMouseOver="yanse(this)" onMouseOut="old(this)"&gt;&lt;span&gt;&lt;/span&gt;&lt;a href="#"&gt;&lt;img src="photo_2.jpg"&gt;&lt;/a&gt;&lt;/div&gt;            &lt;div class="name"&gt;&lt;a href="#"&gt;图片2&lt;/a&gt;&lt;/div&gt;        &lt;/li&gt;        &lt;li&gt;            &lt;div class="picture" onMouseOver="yanse(this)" onMouseOut="old(this)"&gt;&lt;span&gt;&lt;/span&gt;&lt;a href="#"&gt;&lt;img src="photo_3.jpg"&gt;&lt;/a&gt;&lt;/div&gt;            &lt;div class="name"&gt;&lt;a href="#"&gt;图片3&lt;/a&gt;&lt;/div&gt;        &lt;/li&gt;        &lt;li&gt;                       &lt;div class="picture" onMouseOver="yanse(this)" onMouseOut="old(this)"&gt;&lt;span&gt;&lt;/span&gt;&lt;a href="#"&gt;&lt;img src="photo_4.jpg"&gt;&lt;/a&gt;&lt;/div&gt;            &lt;div class="name"&gt;&lt;a href="#"&gt;图片4&lt;/a&gt;&lt;/div&gt;        &lt;/li&gt;&lt;/ul&gt; &lt;/body&gt;&lt;/html&gt; 
 
[解决办法]
原生好麻烦，有jquery就好了
[解决办法]
探讨

原生好麻烦，有jquery就好了

[解决办法]
用jquery，代码如下：

&lt;style type="text/css"&gt;  
  .picture
  {
 margin:10px;
    width:50px;
    border:1px solid #D7D7D7;
 background-color:#ff0000 ;
  }
 .spicture
 {
    margin:10px;
    width:50px;
    border:3px solid #00a2ff;
    background-color:#0000ff ;
 }

&lt;/style&gt;

&lt;script type="text/javascript"&gt;

$(function(){
 $(".picture").bind("mouseover",
 function()
 {
   $(this).addClass("spicture");//追加样式
 }
 );
 $(".picture").bind("mouseout",
 function()
 {
   $(this).removeClass("spicture");//删除样式
 }
 );

});

&lt;/script&gt;
[解决办法]
使用jquery

js改走形式

热点推荐