首页 > 代码库 > JS——控制标记的样式
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=http://www.mamicode.com/"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=http://www.mamicode.com/"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=http://www.mamicode.com/"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——控制标记的样式
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。