• 技术文章 > web前端 > js教程

    querySelector方法怎么使用

    不言 不言 2019-02-14 15:23:15 原创 244
    querySelector() 方法可以用于返回文档中匹配指定 CSS 选择器的一个元素,如果需要返回所有的元素,就需要使用querySelectorAll() 方法替代,下面我们就来具体看看querySelector方法的具体用法。

    JavaScript

    我们先来看一下querySelector()的基本语法

    document.querySelector(CSS selectors)

    CSS selectors表示一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。

    注意:对于多个选择器,使用逗号隔开。

    下面我们来看具体示例

    代码如下

    <!DOCTYPE html>
    <html>
    <head>
       <title></title>
    </head>
    <body>
    <h2 class="example">文本的标题</h2>
    <p class="example"> 文本的段落。</p> 
    <button onclick="myFunction()">按钮</button>
    <script>
    function myFunction() {
        document.querySelector(".example").style.backgroundColor = "red";
    }
    </script>
    </body>
    </html>

    效果如下:当点击“按钮”后,文本标题的背景颜色就会变成如下所示的红色

    微信截图_20190214151346.png

    本篇文章到这里就全部结束了,更多精彩内容大家可以关注php中文网的其他相关栏目教程!!!

    以上就是querySelector方法怎么使用的详细内容,更多请关注php中文网其它相关文章!

    第六期线上培训班
    专题推荐: querySelector
    上一篇:jQuery的insertBefore()方法怎么用 下一篇:jQuery的insertAfter()方法怎么用

    相关文章推荐

    • jQuery类选择器querySelector的使用实例详解 • 总结jQuery中querySelector选择器的用法详解 • 原生强大的DOM选择器querySelector详细介绍(代码附上) • js querySelector() 基本使用方法(图文教程) • JavaScript中querySelector()获取HTML元素的方法介绍

    全部评论我要评论

  • 取消 发布评论 发送
  • PHP中文网