原生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 阅读(482) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 原生js_缺点分析

· jQuery改进原生js案例

· JS 拖动DIV边框改变其大小

· 基础课-实际案例

· 小tips：CSS实现0.5px的边框的两种方式

阅读排行：
· 终于写完轮子一部分：tcp代理了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理

beyondx

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

导航

公告

搜索

常用链接

最新随笔

积分与排名

随笔分类

随笔档案

阅读排行榜

推荐排行榜