关于JavaScript与HTML的交互事件

2023年6月10日下午12:59 • JavaScript

关于JavaScript与HTML的交互事件的完整攻略，我们可以通过以下步骤进行实现：

1.选中HTML元素

我们可以使用JavaScript选择器去选中我们想要操作的HTML元素，可以是ID、class、标签名等。

示例一：

<!DOCTYPE html>
<html>
<head>
    <title>选中HTML元素示例</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="myDiv" class="box">这是一个DIV元素，宽高为200px，背景色为黄色。</div>
    <script>
        var myDiv = document.getElementById("myDiv"); //选中一个ID为"myDiv"的DIV元素
        myDiv.style.fontSize = "32px"; //修改元素字体大小
        myDiv.style.color = "red"; //修改元素字体颜色
    </script>
</body>
</html>

示例二：

<!DOCTYPE html>
<html>
<head>
    <title>选中HTML元素示例</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box">这是一个DIV元素，宽高为200px，背景色为黄色。</div>
    <div class="box">这是另一个DIV元素，宽高为200px，背景色为黄色。</div>
    <script>
        var myBoxs = document.getElementsByClassName("box"); //选中class为"box"的所有DIV元素，返回一个数组
        for (var i = 0; i < myBoxs.length; i++) {
            myBoxs[i].style.fontSize = "24px"; //修改元素字体大小
            myBoxs[i].style.color = "red"; //修改元素字体颜色
        }
    </script>
</body>
</html>

2.添加交互事件

我们可以使用JavaScript中的addEventListener()方法，在HTML元素上添加交互事件，例如：点击、键盘输入等等。

示例一：

<!DOCTYPE html>
<html>
<head>
    <title>添加交互事件示例</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: yellow;
            cursor: pointer; /*添加鼠标指针*/
        }
    </style>
</head>
<body>
    <div id="myDiv" class="box">点击我修改字体颜色</div>
    <script>
        var myDiv = document.getElementById("myDiv");
        myDiv.addEventListener("click", function() { //添加点击事件
            myDiv.style.color = "green"; //修改字体颜色
        });
    </script>
</body>
</html>

示例二：

<!DOCTYPE html>
<html>
<head>
    <title>添加交互事件示例</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: yellow;
            cursor: pointer; /*添加鼠标指针*/
        }
    </style>
</head>
<body>
    <input id="myInput" type="text" placeholder="输入字体大小0-100"> <!--添加一个文本输入框-->
    <div class="box">这是一个DIV元素，宽高为200px，背景色为黄色。</div>
    <script>
        var myInput = document.getElementById("myInput");
        var myBoxs = document.getElementsByClassName("box"); //选中所有class为"box"的DIV元素
        myInput.addEventListener("input", function() { //添加输入事件
            var fontSize = parseInt(myInput.value); //将文本输入框的数值转换成整形
            if(fontSize >= 0 && fontSize <= 100) {
                for (var i = 0; i < myBoxs.length; i++) {
                    myBoxs[i].style.fontSize = fontSize + "px"; //修改元素字体大小
                }
            }
        });
    </script>
</body>
</html>

以上就是关于JavaScript与HTML的交互事件的完整攻略，希望对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：关于JavaScript与HTML的交互事件 - Python技术站