关于js控制变色有关问题
日期：2014-05-16 浏览次数：20454 次
关于js控制变色问题
现在有几个div,例如
<div class="css1"></div><div class="css2"></div><div class="css3"></div>
3个风格的div，我想实现鼠标指上去他们的风格变成css4的风格，然后鼠标移出的时候变回原来的风格。现在用onmouseover实现变风格的功能，但是怎么实现移出的时候判断原来是什么风格呢
------解决方案--------------------
。。。你得把前面加上选择器啊，，亲。。
我这么写是为了 方便你理解。。
------解决方案--------------------
用jquery的方法实现，很方便：
现在有几个div,例如
<div class="css1"></div><div class="css2"></div><div class="css3"></div>
3个风格的div，我想实现鼠标指上去他们的风格变成css4的风格，然后鼠标移出的时候变回原来的风格。现在用onmouseover实现变风格的功能，但是怎么实现移出的时候判断原来是什么风格呢
div
css
js
javascript
class
------解决方案--------------------
。。。你得把前面加上选择器啊，，亲。。
我这么写是为了 方便你理解。。
<div id="container">
<div class="css1">111</div>
<div class="css2">222</div>
<div class="css3">333</div>
</div>
<script type="text/javascript">
window.onload = function(){
var container = document.getElementById('container');
var divs = container.getElementsByTagName('div');
var len = divs.length;
for(var i=0;i<len;i++){
divs[i].onmouseout = function(){
var classes = this.className;
classes = classes.split(' ');
var len = classes.length,i=len-1;
for(;i>=0;i--){
if(classes[i]=='css4'){
classes.splice(i,1);
}
}
this.className = classes.join(' ');
}
divs[i].onmouseover= function(){
this.className += ' css4';
}
}
}
</script>
------解决方案--------------------
用jquery的方法实现，很方便：
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>无标题文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".css1,.css2,.css3").mouseover(function(e) {
$(this).addClass("css4")
}).mouseout(function(e) {
$(this).removeClass("css4")
});;
});
</script>
<style type="text/css">
.css1 {
background-color: #CCC;
}
.css2 {
background-color: #abc;
}
.css3 {
background-color: #cba;
}
.css4 {
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
