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

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

作者:互联网

       在学习完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