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 {
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 {
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>

相关阅读:
Html中常用的属性
 vue-页面回退
 vue-watch
html
Html-列表
 vue项目中px自动转换为rem
vuex使用
 localStorage的使用
 slot
模糊查询
原文地址：https://www.cnblogs.com/weiyu11/p/6649003.html