JavaScript程序设计训练 Day7

最新推荐文章于 2024-11-02 12:42:04 发布

晚晚昨晚吃晚饭很晚睡说晚

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量201

点赞数 1

分类专栏：学习打卡 JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_55786319/article/details/124702911

版权

本文介绍了使用JavaScript设计的四个页面交互功能：1) 实现删除和替换水平线的按钮；2) 添加水平线功能；3) 列表项转移功能；4) 下拉框内容与p标签的联动展示。

摘要由CSDN通过智能技术生成

1、页面上显示HTML教程123456，每行下面有一条水平线。设计两个按钮，实现点击按钮删除水平线和用不同的图片替换水平线的功能。

在这里插入图片描述

<body>
    <h1>HTML教程1</h1><hr>
    <h1>HTML教程2</h1><hr>
    <h1>HTML教程3</h1><hr>
    <h1>HTML教程4</h1><hr>
    <h1>HTML教程5</h1><hr>
    <h1>HTML教程6</h1><hr>
    <div>
        <input type="button" value="删除水平线" onclick="del()">
        <input type="button" value="替换水平线" onclick="add()">
    </div>
    <script>
        function del(){
   
            var hrs=document.getElementsByTagName("hr");
            for(var i=hrs.length-1;i>=0;i--){
   
                var hr=hrs[i];
                hr.parentNode.removeChild(hr);
            }
        }

        function add(){
   
            var hrs=document.getElementsByTagName("hr");           
            for(var i=hrs.length-1;i>=0;i--){
   
                var hr=hrs[i];
                var img=doc