HTMLDOM_样式控制和事件的_概述

使用元素的style属性来设置

　　如：

　　　　修改样式方式1：

　　　　div1.style.border = "1px solid red";

　　　　div1.style.width = "200px";

　　　　div1.style.fontSize = "20px";

提前定义好类选择器的样式，通过元素的className属性来设置class属性值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
            .d1{
                border: 1px solid crimson;
                width: 100px;
                height: 100px;
            }

            .d2{
                border: 1px solid mediumblue;
                width: 200px;
                height: 200px;
            }
    </style>

</head>
<body>

    <div id="div1">
        div1
    </div>

    <div id="div2">
        div2
    </div>

    <script>
        var div1 = document.getElementById("div1")
        div1.onclick = function () {
            div1.style.border = "1px solid red";
            div1.style.width = "200px";
            div1.style.fontSize = "20px";
        }

        var div2 = document.getElementById("div2");
        div2.onclick = function () {
            div2.className = "d1";
        }

    </script>
</body>
</html>

事件的_概述

概念：某些操作。如：单击，双击，键盘按下，鼠标移动了

事件源：组件，如：按钮文档输入框

监听器：代码

注册监听：将事件，事件源监听器结合在一起，当事件源发生某个事件，则触发执行监听器代码

常见事件：

　　点击事件

　　　　onclick 单击事件

　　　　ondblclick 双击事件

　　焦点事件

　　　　onblur 失去焦点

　　　　onfocus 元素获取焦点

　　加载事件

　　　　onload 一张页面或一幅画像完成加载

　　鼠标事件

　　　　onmousedown鼠标按钮被按下。

　　　　onmouseup鼠标按键被松开。

　　　　onmousemove鼠标被移动。

　　　　onmouseover鼠标移到某元秦之上。

　　　　onmouseout鼠标从某元素移开。

　　键盘事件

　　　　　　 onkeydow 某个键盘按键按下

　　　　　onkeyuo 某个键盘按键被松口

　　　　　onkeypress 某个键盘按键被按并松开

　　选择和改变

　　　　　onchange 域的内容被改变

　　　　　onselect 文本被选中

　　表单事件

　　　　onsubmit 　　确认按钮被点击

posted on 2022-08-04 15:24 淤泥不染阅读(30) 评论(0) 编辑收藏举报