原生js_给div设置边框和文本 

<!--@description-->
<!--@author beyondx-->
<!--@date Created in 2022/07/31/ 15:43-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_一个小案例</title>
    <style>
        div {
            height: 100px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <input type="button" value="设置边框" id="btnOne"/>
    <input type="button" value="设置文本" id="btnTwo"/>
    <div></div>
    <div></div>
    <div></div>
    <!-- 需求: 点击按钮 给3个div设置 边框 和 文本 -->
    <script>
        // 入口函数
        window.onload = function () {

            // 1.先要获取对应的元素
            var myButtonOne = document.getElementById("btnOne");
            var myButtonTwo = document.getElementById("btnTwo");
            var divs = document.getElementsByTagName("div");

            // 2.给 myButtonOne按钮 设置 点击事件
            myButtonOne.onclick = function() {
                // for...in 循环遍历 divs
                for(var index in divs) {
                    divs[index].style.border = '1px solid red';
                }
            };

            // 3.给 myButtonTwo按钮, 设置 点击事件
            myButtonTwo.onclick = function() {
                // for...in 循环遍历 divs
                for(var index in divs) {
                    divs[index].textContent = "我是设置的文本";
                    // divs[index].innerHTML = "我是设置的文本";
                }
            }
        }
    </script>
</body>
</html>

posted on 2022-07-31 16:07  beyondx  阅读(447)  评论(0)  编辑  收藏  举报

导航