首頁 > web前端 > js教程 > querySelector方法怎麼使用

querySelector方法怎麼使用

不言
發布: 2019-02-14 15:23:15
原創
20719 人瀏覽過

querySelector() 方法可以用來傳回文件中符合指定CSS 選擇器的一個元素,如果需要傳回所有的元素,就需要使用querySelectorAll() 方法來取代,下面我們就來具體看看querySelector方法的具體用法。

querySelector方法怎麼使用

我們先來看看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>
登入後複製

效果如下:當點擊「按鈕」後,文字標題的背景顏色就會變成如下所示的紅色

querySelector方法怎麼使用

這篇文章到這裡就全部結束了,更多精彩內容大家可以關注php中文網的其他相關專欄教學! ! !

以上是querySelector方法怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板