首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么这个选择器不能工作?JS

选择器不能工作的原因可能有多种,以下是一些常见的可能原因和解决方法:

  1. 选择器错误:首先要检查选择器是否正确。确保选择器的语法正确,并且与要选择的元素匹配。可以使用浏览器的开发者工具来验证选择器是否有效。
  2. 元素未加载:如果选择器在页面加载时运行,但是元素尚未加载完成,选择器可能无法找到元素。可以将脚本放在页面底部,或者使用DOMContentLoaded事件来确保元素加载完成后再运行脚本。
  3. 元素不存在:如果选择器无法找到元素,可能是因为元素不存在于DOM中。可以通过检查HTML结构或使用其他选择器来确认元素是否存在。
  4. 脚本执行顺序错误:如果选择器在脚本执行之前运行,可能无法找到元素。可以将脚本放在页面底部,或者使用defer或async属性来延迟脚本执行。
  5. 元素隐藏或不可见:如果选择器无法找到元素,可能是因为元素被隐藏或设置为不可见。可以使用CSS的display、visibility或opacity属性来控制元素的可见性。
  6. JavaScript错误:如果选择器在JavaScript代码中使用,可能是因为代码中存在其他错误导致选择器无法正常工作。可以使用浏览器的开发者工具来查看控制台中的错误信息,并逐步调试代码。

总结:选择器不能工作的原因可能是选择器错误、元素未加载、元素不存在、脚本执行顺序错误、元素隐藏或不可见、JavaScript错误等。需要仔细检查代码,并使用开发者工具进行调试。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 小心这个陷阱: 为什么JS中的 every()对空数组总返回 true

    JavaScript 语言的核心部分足够大,以至于我们很容易误解其某些部分的工作方式。最近在重构一些使用 every() 方法的代码时,发现实际上并不理解其背后的逻辑。...但是,为什么在没有值来运行回调函数时,空数组会返回 true 给 every() 呢? 要理解为什么,我们需要仔细看看规范是如何描述这个方法的。...现在的问题是:为什么 every() 会表现出这样的行为?...空真(Vacuous truth)是一个数学概念,意味着如果给定的条件(称为前件)不能被满足(即给定的条件不为真),那么某件事就是真的。...如果你也对这个行为感到困惑,那么我建议你改变阅读 every() 调用的方式。不要把 every() 理解为“这个数组中的每一项是否都符合这个条件?”

    21420

    手摸手教你写个ESLint 插件以及了解ESLint的运行原理

    PS: 如果是数字的话,很容易就成为魔鬼数字,没有人知道为什么这个数字, 这个数字有什么含义。 使用模板初始化项目: 1....No // 这个插件包含一个或多个处理器吗 // 处理器用于处理js以外的文件 比如.vue文件 create package.json create lib/index.js create...---- ESLint的运行原理 在开发规则之前,我们需要ESLint是怎么运行的,了解插件为什么需要这么写。 1...., npm的包名不能为 eslint-plugin-xx-xx,只能为 eslint-plugin-xx否则会有报错,被这个问题搞得头疼o(╥﹏╥)o 扩展: 以上内容足够开发一个插件,这里是一些扩展知识点...参考资料: 创建规则ESLint 工作原理探讨

    1.2K20

    vue-clearcss 高效清除vue中无用的css

    vue-clearcss 会找到你css中没有使用的css样式,是否删除由使用者自己决定,工作起来就像eslint 为什么要用它?...一个vue文件在长期迭代中css会越来越冗余,它不像html和js那么好删除,html多了页面会展示,js你只要看下它用的地方就可以了,然而css比如scss、less都是用嵌套语法,通过搜索删除那么有可能它在...UNCSS:这个工具是通过jsdom的querySelector方法来实现的,但是vue不是单纯的html所以不能直接使用,官网给的建议是vue最后展现的页面再去搜索多余css,个人觉得不够好用。...(我匹配css的方式就是参考了jsdom的querySelector相关源码,也是使用动态模板生成函数实现的) 存在的缺陷 1 所有的伪类选择器都认为是有用的 2 所有的属性选择器 (除了[...3 过滤结果只针对该文件是无用,但有可能该css元素是用来影响子组件的,需要你自己确认,这也是为什么我不像其他工具去加入webpack打包的只是打印出来自己选择是否删除的原因,如果考虑到对子组件的影响

    1.7K40

    你会写ESLint rule吗?你了解ESLint的运行原理吗?

    PS: 如果是数字的话,很容易就成为魔鬼数字,没有人知道为什么这个数字, 这个数字有什么含义。 使用模板初始化项目: 1....No // 这个插件包含一个或多个处理器吗 // 处理器用于处理js以外的文件 比如.vue文件 create package.json create lib/index.js create...[将代码解析成AST] --- ESLint的运行原理 在开发规则之前,我们需要ESLint是怎么运行的,了解插件为什么需要这么写。 1...., npm的包名不能为eslint-plugin-xx-xx,只能为eslint-plugin-xx否则会有报错,被这个问题搞得头疼o(╥﹏╥)o 扩展: 以上内容足够开发一个插件,这里是一些扩展知识点...参考资料: 创建规则 ESLint 工作原理探讨

    1.2K30

    2018年各大互联网前端面试题三(阿里)

    基础 简单介绍一下自己,为什么选择做前端? 说下你所在的EPI实验室和CTG工作室是干什么的? 介绍下你最近的项目? 说出你觉得自己身上最优秀的能力? 说出你未来的规划?...css选择器有哪些?选择器的优先级? CSS属性选择器和伪类选择器的优先级? 使用css实现一个持续的动画效果 右边宽度固定,左边自适应怎么布局?...为什么浏览器需要同源策略? 浏览器跨域的几种方式? 浏览器性能怎么优化?(从多个方向上去答) JS基本数据类型有哪些? 原理 JS 怎么实现一个类。怎么实例化这个类。...为什么 var 可以重复声明? 四种定位的区别 let与var的区别? 如何让子类继承父类的方法与属性? 怎么发送一个跨域的POST请求? 框架 Vue是如何实现双向绑定的?...怎么用JS实现一个队列? 描述出任意一个排序算法? 封装一个函数,参数是定时器的时间,.then执行回调函数。 一行代码实现数组去重?

    1.2K30

    开发 | 用 7 天时间,他做了个仿麦当劳的小程序

    接下来,我与知晓程序(微信号 zxcx0101)就来跟大家一起回顾一下这个项目的完成过程。 关注「知晓程序」公众号,在微信后台回复「开发」,获取小程序开发技巧精选文章。 为什么选择小程序?...特别是 rpx,有了它,小程序可以自动适应不同的手机屏幕,这也使得开发者的工作量大幅降低。 关注「知晓程序」公众号,在微信后台回复「rpx」,获取 rpx 单位详细解读文章。...当然页面传值并不只有这样方法,还有设置全局的数据缓存、引入事件订阅和发布框架 onfire.js 等方法。 接下来,我们需要获取从服务器发来的数据。...例如,我做星座选择器的时候就不知道 picker 这个组件,改而使用了 action-sheet。因为 action-sheet 里面的数据不能超过 6 项,所以我在这里卡了一段时间。...还有,微信小程序的编译包是不能超过 2 MB 的,如果你不将自己的图片放在服务器,也尽可能将你的图片压缩一下。我开发的时候,编译包就超过了 2 MB。

    73440

    你了解 JSX,那你了解 StyleX 么?

    为什么需要CSS解决方案 市面上有非常多「CSS解决方案」,比如: BEM命名规范 CSS Module规范 原子CSS(比如TailwindCSS) CSS-in-JS(比如emotion) 为什么需要这些方案...再比如,CSS中各种选择器的复杂组合增强了选择器的灵活性。但同时也增强了不确定性。...但大家工作都这么忙,遇到这种问题,多半就是用新的选择器覆写样式,必要的时候还会加!important后缀。久而久之,这代码就没法维护了。...通过props透传啊~ 也就是说,stylex禁用了CSS中可能造成混淆的选择器,用JS的灵活性弥补这部分功能的缺失。 有些同学可能会说:这些功能,其他「CSS-in-JS库」也能做啊。...如果: 你项目没有达到Meta这样的体量 你项目没有多年的迭代周期 你项目前前后后没有多个工程师经手 那大概率是不能接受stylex设计理念中的这些约束。 对于stylex,你怎么看?

    41420

    如何使用 React 构建自定义日期选择器(3)

    渲染 datepicker 此时,值得一提的是,Bootstrap Dropdown 组件将用于模拟自定义日期选择器的下拉效果。这就是为什么 Reactstrap 包被添加为此项目的依赖项的原因。...设置日期选择器的样式 将以下代码片段添加到 src/components/Datepicker/styles.js,以创建日期选择器所需的样式组件。...important; `; 应用程序组件 最后,更新 src/App.js 文件,看起来像下面的代码片段。...虽然本教程中创建的自定义日期选择器能按预期工作,但它并不能完全满足日期选择器元素的所有要求。...通过 props 实现 max 和 min 日期 将输入类型从 “text” 切换到 “date” 更好的可访问性改进 你可以在 react-datepicker-demo 的 GitHub 上获得这个自定义日期选择器的更多改进版本的完整源代码

    8K10

    前端入门23-CSS预处理器(Less&Sass)声明正文-CSS预处理(less&Sass)

    为什么要有 CSS 预处理?...,尤其是在后期为某部分标签新增样式时,总会不知道到底应该在 CSS 文件中哪里写这个选择器这个选择器是否会与前面冲突。...所以,CSS 预处理器其实只是一个过程的称呼,主要工作就是将源代码编译并输出标准的 CSS 文件,而这个源代码可以用 Sass 写,也可以用 Less,当然还有其他很多种语言。...,但不能用于组合选择器中。...所以,其实也就是上述例子中,类似函数存在的那些模板选择器,当在书写选择器时,在其后面增加 () 括号,则表示这个选择器只属于 less 的命名空间,转成 CSS 后并不会出现。

    1.6K30

    前端移动web-day03学习笔记

    所以还是那句话,怎么舒服怎么来 这里是淘宝内部解释为什么淘宝的开发团队将rem设置为 1/10 屏幕宽度(其实是为了以后能够兼容vw和vh) https://www.w3cplus.com/mobile...代码(推荐) 2.使用css媒体查询 由于实际开发中一般使用js代码来动态设置html字体大小,实现1rem = 1/10 屏幕宽度, 由于暂时未接触js语言,所以这里老师提前写好一个js文件,我们开发时只需要导入即可...02-Less语法(CSS预处理语言) 1.less语言,css预处理语言 a.浏览器只识别三种语言:html,css,js b.如果是其他的语言,浏览器不能直接识别,需要转成浏览器可以识别的语言...(4-5) 3.less工作流程 *(1)新建一个后缀名为.less的文件 *(2)需要将less预处理成css语言(Eazy LESS) * 你在less文件中写代码,只要保存...,这个插件就会帮你自动生成css更新 *(3)在浏览器中导入“css文件” less语法-变量 1.变量(variable)作用:存储数据 类似于数学中的字母,例如 a = 10, ax5 =

    57600

    字节跳动前端实习面经

    同步和异步 同步:在一定程度上可以看做是单线程,这个线程请求一个方法后就待这个方法给他回复,否则他不往下执行 异步:在一定程度上可以看做是多线程的,请求一个方法后,就不管了,继续执行其他的方法 DNS...标签选择器选择器 ID选择器 全局选择器 组合选择器 继承选择器 伪类选择器 兼容性问题总结 (1) HTML对象获取问题 FireFox:document.getElementById("idName...event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX js 部分 如何实现不用viewport控制用户不能缩放 用js监听屏幕宽度...为什么会有点透现象 js 实现查询字符串中出现最多次数的字符 var str = "zhaochucichu"; var o = {}; // 用对象的属性来统计每一字符的频数 for (var i =...浏览器中JS和UI公用一个线程,JS计算过程中,不能响应UI;如果遇到计算量比较大的任务,如操作图像像素时,会造成用户行为得不到响应。

    1.5K20

    js与jQuery的区别以及jQuery选择器和方法的使用

    目录 使用jQuery js与jQuery代码对比 jQuery选择器:用来选中元素 基本方法 ---- js与jQuery代码对比 jQuery选择器:用来选中元素 基本方法 使用jQuery jQuery...官网:http://jquery.com/ 为什么要学jQuery:可以简化JavaScript开发,jQuery中包含有:选择器,CSS样式,HTML事件处理,JS动画 以及丰富的插件等等,而且浏览器兼容性很高...打开jQuery官网首页:write less,do more 写的少做的更多 为什么要用jQuery?...准备工作: 下载jQuery库: 登录jQuery官网http://jquery.com/    点击下载 有三种版本: Download the compressed, production jQuery...var len = $(":checkbox:checked").length;  Console.info(len); 先测试一下能不能获取到选中的选项个数。

    15.4K10

    全网最新、最全的jQuery核心知识,你真的不想点开看看嘛?

    它使HTML文档遍历和操作、事件处理、动画和Ajax等工作变得更加简单,并提供了一个跨多种浏览器的易于使用的API。...过滤器不能单独使用,必须和选择器一起使用。...事件名称(事件的处理函数) $(选择器) :定位dom对象,dom对象可以有很多个,这些dom对象都绑定了这个事件 事件名称 : 就是js中的事件去掉on的部分,例如:js中的单击事件 onclick(...该方法给 API 带来很多便利,推荐使用该方法 语法 :$("选择器").on( "事件名称" ,事件的处理函数) 事件名称 : 就是js事件中去掉on的部分 (js中onclick on事件中 click...语法:$.get(url,data,function(resp),dataType) 注意:这里边的参数顺序不可以改变,一定要按照这个顺序,且不能缺省 注意:这里的语法格式不同于 $.ajax({name

    5.9K10

    浏览器兼容

    一、什么是浏览器兼容问题 同一份代码,有的浏览器显示效果正常,有的浏览器显示不正常 二、为什么会有浏览器兼容问题 同一产品,版本越老 bug 越多 同一产品,版本越新,功能越多。...老的浏览器还没有这个功能,当然显示有误 不同浏览器,不同标准,不同效果。比如不同浏览器的内核都不一样 三、用到的网站 1、caniuse.com 查CSS属性兼容情况 ? ?...[endif]--> 使用了条件注释的页面在 Windows Internet Explorer 9 中可正常工作,但在 Internet Explorer 10 中无法正常工作。...IE)Hack 属性前缀法(即类内部Hack) 例如 IE6能识别下划线_和星号* , IE7能识别星号*,但不能识别下划线_, IE6~IE10都认识"\9",但firefox前述三个都不能认识 这些都是...(即选择器Hack) IE条件注释法(即HTML条件注释Hack) 针对所有IE(注:IE10+已经不再支持条件注释): <!

    1.9K52
    领券