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

我試圖將CSS樣式插入到h1類元素。它在我更新mmy主題之前已經有效，但由於某種原因，它現在不起作用。有人知道爲什麼Javascript/jQuery - 將CSS樣式應用於類元素

我試過getElementsByClassName和[0]來查找數組，沒有任何工作適合我。 CSS類具有display：none，因爲我希望標題僅在包含類「product_title entry-title」的頁面上顯示。所以當它找到這個類的時候，它應該把一個CSS類放到這個元素上來顯示：block，以便它顯示在這些頁面上。

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

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

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

來源

2017-05-06 MuppetShovel

OPS，是知道的。「文檔」的重複行是一個簡單的複製粘貼錯誤。 – MuppetShovel

然後做編輯請，因爲這是拋出一個錯誤在您的代碼段中，您的選擇器也必須是這樣的：'querySelector（'。product_title.entry-title'）' – Lixus

謝謝，但我最終得到這個錯誤。儘管我嘗試了所有關於此線程的評論:( 「（index）：434 Uncaught TypeError：無法讀取屬性'樣式'null at（index）：434」 – MuppetShovel

，而選擇使用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>

來源

2017-05-06 16:41:38 brk

他需要兩個類都存在於元素上爲了向他們展示 – Lixus

謝謝，但我仍然得到這個錯誤。儘管我嘗試了所有關於此主題的評論:( 「（index）：434 Uncaught TypeError：無法讀取屬性'style'null at（index）：434」 – MuppetShovel

您需要首先聲明的變量。此外，querySelectorAll與CSS選擇器的工作方式相同，因此您需要爲您的類添加點以供querySelector找到它們。第一，孩子有點矯枉過正這裏：

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

請記住所以你這將只選擇那些類第一H1。

來源

2017-05-06 16:42:13 Nicolas

請注意，對於具有多個類的元素，不應該在類名之間有任何空白：'.product_title.entry-title' –

op發佈了它們的標記。'querySelector（「。product_title .entry-title」）;'不起作用。 –

感謝您指出 - 它現在已經修復了。 – Nicolas

您似乎誤解了querySelector方法的使用。除了列出所有由空格分隔的所需元素的類外，每個類名稱前面必須加上一個句號.，如果所需元素具有多個類別，則類別之間不應有空格。見校正代碼段：

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

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

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

來源

2017-05-06 16:42:34

謝謝，但我仍然得到這個錯誤。儘管我嘗試了所有關於此主題的評論:( 「（index）：434 Uncaught TypeError：無法讀取屬性'樣式'null （index）：434「 – MuppetShovel

使用jQuery的CSS（），用於改變的CSS特性的方法。這將適用於這是由選擇器中選擇的所有元素（在這種情況下，它是「H1」）如果你想改變只有一個元素添加。首先（）

$('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>

來源

2017-05-06 16:43:53

OP沒有說他們想改變所有元素，實際上， y表示他們使用'[0]'和'getElementsByClassName'，這意味着他們只是尋找第一個元素。你爲什麼要包含jquery來做這麼簡單的事情？它們在'querySelector（）'選擇器中只有一個語法錯誤。 –

謝謝，但我仍然得到這個錯誤。儘管我嘗試了所有關於此主題的評論:( 「（index）：434 Uncaught TypeError：無法讀取屬性'樣式'null at（index）：434」 – MuppetShovel

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

回答

相關問題