前端牛客题解——web API

XSSSR

已于 2022-03-31 15:44:18 修改

阅读量1.2k

点赞数

分类专栏：前端题目文章标签：学习 javascript html5

于 2022-03-31 15:29:39 首次发布

本文链接：https://blog.csdn.net/weixin_46050451/article/details/123872963

版权

前端题目专栏收录该内容

1 篇文章 0 订阅

订阅专栏

FED49 JS动态创建节点

请补全JavaScript函数，根据参数数组创建li元素。
要求：

li元素的个数和数组的长度一样
li元素的内容是数组中的每个元素
将创建的所有li元素插入到ul中

<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <ul></ul>
    </body>
    <script type="text/javascript">
        function createLi(array){
            // 补全代码
            for(var i = 0;i < array.length;i++){
                var li = document.createElement('li');
                var ul = document.querySelector('ul');
                li.innerHTML = array[i];
                ul.appendChild(li);
            } 
        }
    </script>
</html>

FED50 根据ID获取元素

请补全JavaScript函数，根据id获取html模块中ul标签下第二个li元素并返回

function getLI(id){
    // 补全代码
    return document.getElementById(id);
}

FED51 JS修改元素内容

请补全JavaScript函数，将类为"box"的div元素内容修改为"欢迎来到牛客网"。

<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <div class='box'></div>
    </body>
    <script type="text/javascript">
        function modifyText(){
            // 补全代码
            var box = document.querySelector('.box');
            box.innerHTML = "欢迎来到牛客网";
        }
    </script>
</html>

FED52 阻止冒泡事件

请补全JavaScript函数，要求在点击li元素的时候不触发ul的事件。
注意：需要自行获取li元素。

<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <ul>
            <li>nowcoder</li>
        </ul>
    </body>
    <script type="text/javascript">
        // 补全代码
        var li = document.querySelector('li');
        li.onclick = function(e){
            e.stopPropagation();
        }
    </script>
</html>

FED53 阻止默认事件

请补全JavaScript函数，要求在点击id为"checkbox"的复选框时不会取消勾选状态。
注意：需要自行获取input元素。

<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <form>
            <label>牛客会陪伴大家</label>
            <input id="checkbox" type="checkbox" checked />
        </form>
    </body>
    <script type="text/javascript">
        // 补全代码
        var check = document.getElementById('checkbox');
        checkbox.onclick = function(e){
            e.preventDefault();
        }
    </script>
</html>

在这里插入图片描述

FED54 url地址

请补全JavaScript函数，实现一个函数返回页面当前url。

function getUrlHref (){
    // 补全代码
    return location.href;
}

在这里插入图片描述

FED55 点击按钮隐藏元素

请补全JavaScript代码，实现一个盒子的关闭按钮功能。
要求：

使类为"btn"的div元素中心点定位在类为"box"的div元素右上顶点
使类为"btn"的div元素中内容"X"垂直水平居中
点击"X"按钮可以使类为"box"的div元素隐藏

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                border: solid 1px black;
                /*补全代码*/
                position:relative;
                display:block;
            }
            .btn{
                width: 20px;
                height: 20px;
                background-color: red;
                /*补全代码*/
                position:absolute;
                right: -10px;
                top : -10px;
                text-align:center;
            }
        </style>
    </head>
    <body>

        <div class='box'>
            <div class='btn'>X</div>
        </div>

        <script type="text/javascript">
            var btn = document.querySelector('.btn');
            var box = document.querySelector('.box');
            btn.onclick = function(){
                // 补全代码
                box.style.display = 'none';
            }
        </script>
    </body>
</html>

XSSSR

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端牛客题解——web API

FED49 JS动态创建节点请补全JavaScript函数，根据参数数组创建li元素。要求：li元素的个数和数组的长度一样li元素的内容是数组中的每个元素将创建的所有li元素插入到ul中<html> <head> <meta charset=utf-8> </head> <body> <ul></ul> </body> &lt
复制链接

扫一扫