标签：http 宽度 蓝色 length 样式 背景颜色 logs tle ==
1.定义一个div，宽度为100px,高度为100px,背景色为粉色。
定义一个事件，鼠标移入时背景色变为蓝色,宽度变为200px.
定义一个事件，鼠标移出时背景色变为红色。
html文件：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="StyleSheet.css" rel="stylesheet" /> </head> <body> <div class="div1" id="dd1"></div> </body> </html> <script type="text/javascript"> var obt = document.getElementById(‘dd1‘); //鼠标移入事件 obt.onmouseover = function () { obt.style.backgroundColor = "blue";
obt.style.width="200px"; } //鼠标移除事件 obt.onmouseout = function () { obt.style.backgroundColor = "red";
} </script>
CSS文件：
.div1 { width:100px; height:100px; background-color:pink; }
1.定义5个div，宽度为100px,高度为100px,背景色为粉色。
定义一个事件，鼠标移入时背景色变为蓝色,宽度变为200px.
定义一个事件，鼠标移出时背景色变为红色,宽度变为100px.
HTML文件：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="StyleSheet.css" rel="stylesheet" /> </head> <body> <div class="div1" id="dd1"></div> <div class="div1" id="Div11"></div> <div class="div1" id="Div2"></div> <div class="div1" id="Div3"></div> <div class="div1" id="Div4"></div> </body> </html> <script type="text/javascript"> var obt = document.getElementsByClassName(‘div1‘); //鼠标移入事件 for (var i = 0; i < obt.length; i++) { obt[i].onmouseover = function () { this.style.backgroundColor = "blue"; this.style.width = "150px"; } } //鼠标移除事件 for (var i = 0; i < obt.length; i++) { obt[i].onmouseout = function () { this.style.backgroundColor = "red"; this.style.width = "100px"; } } </script>
CSS文件：
.div1 { width:100px; height:100px; background-color:pink; float:left; margin-right:10px; }
1.定义5个div，宽度为100px,高度为100px,背景色为粉色。
定义一个事件，鼠标移入时背景色变为蓝色,宽度变为200px.
定义一个事件，鼠标移出时背景色变为红色,宽度变为100px.
点击变为黑色，且同一时间只能有一个div是黑色。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="StyleSheet.css" rel="stylesheet" /> </head> <body> <div class="div1"> <div class="div111"></div> </div> <div class="div1"> <div class="div111"></div> </div> <div class="div1"> <div class="div111"></div> </div> <div class="div1"> <div class="div111"></div> </div> <div class="div1"> <div class="div111"></div> </div> <div class="div1"> <div class="div111"></div> </div> <div class="div222"></div> <div class="div222"></div> <div class="div222"></div> <div class="div222"></div> <div class="div222"></div> <div class="div222"></div> </body> </html> <script type="text/javascript"> var obt = document.getElementsByClassName("div1"); var obt1 = document.getElementsByClassName("div111"); for (var i = 0; i < obt.length; i++) { //点击事件 obt[i].onclick = function () { // for (var j = 0; j < obt.length; j++) { obt[j].style.backgroundColor = "pink"; } this.style.backgroundColor = "black"; } //鼠标移入事件 obt[i].onmouseover = function () { //如果移入的div背景颜色不是黑色，则变成灰色 if( this.style.backgroundColor != "black") this.style.backgroundColor = "gray"; } //鼠标移除事件 obt[i].onmouseout = function () { //如果移除的div背景颜色为灰色，则变成粉色 if (this.style.backgroundColor=="gray") this.style.backgroundColor = "pink"; } } </script>
标签：http 宽度 蓝色 length 样式 背景颜色 logs tle ==
原文地址：http://www.cnblogs.com/weiyu11/p/6649003.html
