文档 querySelector 实现的问题-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

487683

文章

249176466

访问

+关注

分类

暂无分类

日期归档

暂无数据

文档 querySelector 实现的问题

发布于2021-06-16 12:39 阅读(1246) 评论(0) 点赞(6) 收藏(1)

我正在添加这段代码以将 an 附加ID到元素li.search内的类 ( ) li。

document.querySelector('li.search').id = 'ControlOverlay';

它适用于我的一些网站，但最近安装的，它不会附加ID到class。

当我在上测试时，我的实现有效w3schools.com，但在我的网站上无效...

关于什么可能是错误的任何想法？

我忘记引用任何图书馆了吗？

这是我的实现：

<!DOCTYPE html>
<html>
<style>

#overlays {position:fixed;top:0;left:0;right:0;bottom:0;z-index:0;background:rgba(110, 173, 238,.9);}
.standby2 {display:none;}
ul {list-style:none;}
</style>
<body>

<ul class="menu">
                <li class="search"><a aria-label="Open" href="#"><span class="gp-icon icon-search"><svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path>
                    </svg><svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
                        <path d="M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z"></path>
                    </svg></span></a></li>          </ul>

<script>

document.querySelector('li.search').id = 'ControlOverlay';
document.getElementById("ControlOverlay").setAttribute("onclick", "ShowOverlay();");
function ShowOverlay(){document.getElementById("overlays").classList.toggle("standby2")}

</script>

这是一个jsfiddle

解决方案

问题出在 document.getElementById("overlay")

您overlay的 HTML 中没有带有 id 的元素。

我也会编辑

document.getElementById("ControlSearchOverlay").setAttribute("onclick", "ShowHideOverlay();");
function ShowHideOverlay(){
    document.getElementById("overlay").classList.toggle("standby")
}

至：

document.getElementById("ControlSearchOverlay").onclick = function() {
    document.getElementById("overlay").classList.toggle("standby")
}

正如 user4642212 提到的，最好使用 addEventListener https://developer.mozilla.org/de/docs/Web/API/EventTarget/addEventListener

document.getElementById("ControlSearchOverlay").addEventListener('click', function() {
    document.getElementById("overlay").classList.toggle("standby")
})

window属性：controllers

2022年最受欢迎的8大编程语言

为什么都说程序员找不到女朋友，但是身边程序猿的却没一个单身的

30岁以上你还死磕技术，别说拿高薪，可能你连饭碗都会保不住

程序员被开除，老板：“有你参与的项目全黄了！”

笑话：一个测试工程师走进一家酒吧

趣图：程序员头疼的4种原因

笑话：面试官：请拿出一段体现你水平的代码。我： sudo rm -rf /*面试官：这体现了你哪方面能力？

网友说：做开发，不被领导喜欢怎么办？

前端精选：在 WPF 中实现融合效果

所属网站分类: 技术文章 > 问答

作者：黑洞官方问答小能手