masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > querySelector方法怎么使用

querySelector方法怎么使用

不言
Lepaskan： 2019-02-14 15:23:15
asal
20720 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
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2190
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2340
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1963
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1849
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1907
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