querySelector方法怎麼使用-js教程-PHP中文網

首頁

web前端

js教程

querySelector方法怎麼使用

不言

Feb 14, 2019 pm 03:23 PM

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

querySelector方法怎麼使用

我們先來看看querySelector()的基本語法

document.querySelector(CSS selectors)

CSS selectors表示一個或多個符合元素的CSS選擇器。可以使用它們的 id, 類別, 類型, 屬性, 屬性值等來選取元素。

注意：對於多個選擇器，使用逗號隔開。

下面我們來看具體範例

程式碼如下

<!DOCTYPE html>
<html>
<head>
   <title></title>
</head>
<body>
<h2 id="文本的标题">文本的标题</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中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr