简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

querySelector方法怎么使用

不言
Lepaskan： 2019-02-14 15:23:15
asal
20568 orang telah melayarinya

querySelector() 方法可以用于返回文档中匹配指定 CSS 选择器的一个元素，如果需要返回所有的元素，就需要使用querySelectorAll() 方法替代，下面我们就来具体看看querySelector方法的具体用法。

JavaScript

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

document.querySelector(CSS selectors)
Salin selepas log masuk

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>
Salin selepas log masuk

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

微信截图_20190214151346.png

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

Atas ialah kandungan terperinci querySelector方法怎么使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
querySelector
sumber：php.cn
Artikel sebelumnya：jQuery的insertBefore()方法怎么用 Artikel seterusnya：jQuery的insertAfter()方法怎么用
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Didapati terdapat nilai atribut id pendua "x" dalam halaman web. Saya menggunakan Angular7 - tiga komponen [a, b, c] menggunakan elemen input dengan id [x]...
daripada 2023-08-31 16:06:41
0
2
276
Dalam JavaScript, perbezaan antara querySelector dan querySelectorAll dan getElementsByClassName dan getElementById Saya ingin tahu apakah sebenarnya perbezaan antara querySelector dan querySelectorAll dan ...
daripada 2023-08-21 21:45:39
0
2
294
angular.js - angular指令获取指令模板中的元素 指令模板如下： 编译后的结构如下： 现在我想获取编译后的各个a元素，我使用querySelector来获取，可是获取不到，也许它不支持编译后的元素，所以想请教大家有什么办法？谢谢
daripada 2017-05-15 17:00:47
0
2
431
javascript - querySelector 高级用法 {代码...}
daripada 2017-04-11 12:12:38
0
3
290
javascript - BOM与DOM中都有document对象他们没有冲突吗？ 可以在书上BOM中看到document对象在window对象中，而且他有write()方法 bgColor属性还有forms/images/links对象但DOM中也有一个 doc...
daripada 2017-04-11 11:26:12
0
2
584
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！