Javascript / jQuery-將CSS樣式應用於類元素

Question

我試圖將CSS樣式插入h1類元素。 它在我更新mmy主題之前起作用，但是由於某種原因，它現在不起作用。 有人知道為什么嗎？

我已經嘗試過getElementsByClassName和[0]來查找數組，但對我來說沒有任何用。 CSS類具有display：none，因為我希望標題僅顯示在包含“ product_title entry-title”類的頁面上。 因此，當找到該類時，應將CSS類放置到display：block元素上，以便在這些頁面上顯示。

 z=document.querySelector("product_title entry-title"); z.style.display="block"; 

 #content h1:first-child { padding-top: 0px; display:none; } 

 <h1 class="product_title entry-title">Arkham Horror</h1> 

Answer 1

您缺少點. 同時使用querySelector.Dot選擇元素. 必須使用其類來選擇元素。

一類也足以選擇元素

 var z = document.querySelector(".product_title"); z.style.display = "block"; 

 #content h1:first-child { padding-top: 0px; display: none; } 

 <section id='content'> <h1 class="product_title entry-title">Arkham Horror</h1> </section> 

Answer 2

您需要先聲明您的變量。 另外，querySelectorAll與CSS選擇器的工作方式相同，因此您需要在類中添加點，以便querySelector可以找到它們。

 var z = document.querySelector(".product_title.entry-title");
 z.style.display="block";

請記住，這只會選擇那些類別的第一個H1，因此您的：first-child有點過分了。

Answer 3

您似乎誤解了querySelector方法的使用。 不僅要列出所需元素的類，所有類都用空格分隔，而且每個類名都必須以句號開頭. 並且如果您想要的元素具有多個類，則這些類之間不應包含空格。 請參閱更正的代碼段：

 var z=document.querySelector(".product_title.entry-title"); z.style.display="block"; 

 h1 { padding-top: 0px; display:none; } 

 <h1 class="product_title entry-title">Arkham Horror</h1> 

Answer 4

使用jQuery .css（）方法更改CSS屬性。 它適用於選擇器選擇的所有元素（在本例中為“ h1”）。如果只想更改一個元素，請添加.first（）

 $('h1').first().css("color", "red"); $('h1').css("display", "block"); 

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <h1>Title</h1>