首页 > 其他分享> > 使用DOM实现另类可修改的侧边栏

使用DOM实现另类可修改的侧边栏

2021-11-22 17:58:11 作者：互联网

在学习完DOM之后，通过使用DOM制作侧边栏来熟悉DOM的增、删、改、获取的使用。在制作的过程中，就想去做一个稍微灵活一点，代码量不大的侧边栏，因此就有了以下的内容，独自学习一些前端知识后的小分享。

首先先实现侧边栏通过输入生成的功能，这里就是用for循环，因为比较懒就不动态侧边栏的行数了，直接给固定输入15行。然后过去父元素body，通过for循环在body下生成15个可输入的子元素div。

实现代码如下：

var body = document.getElementsByTagName("body");//获取body

    for (var i = 1; i <= 15; i++) {
        var box = document.createElement("div");//创造一个div
        box.innerHTML = prompt("请输入第" + i + "行内容");//修改div中文本内容
        body[0].appendChild(box);
    }

页面实现效果：

然后，我选择在页面中添加一个修改按钮，去具体实现对想要修改的那一行，进行文本修改，并且对button和div进行基本的样式设置。

实现代码如下：

<style>
    div {
        margin: 20px;
        font-size: 15px;
    }
    
    button {
        position: absolute;
        left: 50px;
        top: 660px;
    }
</style>

<body>
    <button onclick="setInfo()">修改</button>
</body>

<script>
    var body = document.getElementsByTagName("body");

    for (var i = 1; i <= 15; i++) {
        var box = document.createElement("div");
        box.innerHTML = prompt("请输入第" + i + "行内容");
        body[0].appendChild(box);
    }

    function setInfo() {
        var num = prompt("请输入你想要修改第几行(只能输入阿拉伯数字)");
        var box = document.getElementsByTagName("div");
        box[num - 1].innerHTML = prompt("请输入你想要修改的内容");
    }
</script>

页面实现效果：

点击修改，会跳出提示。这里我选择修改第2行，根据提示继续操作。

修改之后的效果展示：

标签：body,DOM,另类,侧边,修改,var,div
来源： https://blog.csdn.net/QyangR1123/article/details/121476337