JS——控制标记的样式
Posted 微雨11
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS——控制标记的样式相关的知识，希望对你有一定的参考价值。
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>
以上是关于JS——控制标记的样式的主要内容，如果未能解决你的问题，请参考以下文章