querySelector的使用方法是什么

發(fā)布時(shí)間：2020-05-09 11:16:26 來(lái)源：億速云閱讀：695 作者：小新欄目：web開(kāi)發(fā)

今天小編給大家分享的是querySelector的使用方法是什么，相信很多人都不太了解，為了讓大家更加了解querySelector的使用方法，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。一定會(huì)有所收獲的哦。

querySelector() 方法可以用于返回文檔中匹配指定 CSS 選擇器的一個(gè)元素，如果需要返回所有的元素，就需要使用querySelectorAll() 方法替代。

我們先來(lái)看一下querySelector()的基本語(yǔ)法

document.querySelector(CSS selectors)

CSS selectors表示一個(gè)或多個(gè)匹配元素的 CSS 選擇器。可以使用它們的 id, 類, 類型, 屬性, 屬性值等來(lái)選取元素。

注意：對(duì)于多個(gè)選擇器，使用逗號(hào)隔開(kāi)。

下面我們來(lái)看具體示例

代碼如下

<!DOCTYPE html>
<html>
<head>
   <title></title>
</head>
<body>
<h3 class="example">文本的標(biāo)題</h3>
<p class="example"> 文本的段落。</p> 
<button onclick="myFunction()">按鈕</button>
<script>
function myFunction() {
    document.querySelector(".example").style.backgroundColor = "red";
}
</script>
</body>
</html>

效果如下：當(dāng)點(diǎn)擊“按鈕”后，文本標(biāo)題的背景顏色就會(huì)變成如下所示的紅色

querySelector的使用方法是什么

關(guān)于querySelector的使用方法是什么就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的參考價(jià)值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

querySelector的使用方法是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽