Javascript/jQuery - 将 CSS 样式应用于类元素答案

【问题标题】：Javascript/jQuery - apply CSS style to class elementJavascript/jQuery - 将 CSS 样式应用于类元素
【发布时间】：2017-10-04 23:50:50
【问题描述】：

我正在尝试将 CSS 样式插入到 h1 类元素中。它在我更新 mmy 主题之前有效，但由于某种原因它现在不起作用。有人知道为什么吗？

我已尝试使用 getElementsByClassName 和 [0] 来查找数组，但对我没有任何帮助。 CSS 类有 display:none，因为我希望标题只显示在包含“product_title entry-title”类的页面上。所以当它找到那个类时，它应该给要显示的元素添加一个 CSS 类：block，这样它就会显示在那些页面上。

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

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

&lt;h1 class="product_title entry-title"&gt;Arkham Horror&lt;/h1&gt;

【问题讨论】：

操作，请注意。 “document”的重复行是一个简单的复制粘贴错误。
那么请进行编辑，因为这会在您的 sn-p 中引发错误，您的选择器也必须是这样的：querySelector('.product_title.entry-title')
谢谢，但我最终还是得到了这个错误。即使我尝试了此线程上的所有 cmets :( "(index):434 Uncaught TypeError: Cannot read property 'style' of null at (index):434"

标签： javascript jquery html css

【解决方案1】：

您在使用 querySelector 选择元素时缺少点 .。使用它的类选择元素需要点 .。

一个类就足以选择元素

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>

【讨论】：

他需要两个类都出现在元素上才能显示它们
谢谢，但我仍然收到此错误。即使我尝试了该线程上的所有 cmets :( "(index):434 Uncaught TypeError: Cannot read property 'style' of null at (index):434"

【解决方案2】：

您似乎误解了querySelector 方法的使用。除了列出所有由空格分隔的所需元素的类之外，每个类名称之前必须有一个句号 . 并且如果您想要的元素有多个类，则这些类之间不应有空格。查看更正后的代码 sn -p：

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

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

&lt;h1 class="product_title entry-title"&gt;Arkham Horror&lt;/h1&gt;

【讨论】：

谢谢，但我仍然收到此错误。即使我尝试了该线程上的所有 cmets :( "(index):434 Uncaught TypeError: Cannot read property 'style' of null at (index):434"

【解决方案3】：

使用 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>

【讨论】：

OP 并没有说他们想改变所有的元素。事实上，他们说他们正在使用[0] 和getElementsByClassName，这意味着他们只是在寻找第一个元素。为什么要包含 jquery 来做这么简单的事情？他们只是在querySelector() 选择器中有语法错误。
谢谢，但我最终还是得到了这个错误。即使我尝试了该线程上的所有 cmets :( "(index):434 Uncaught TypeError: Cannot read property 'style' of null at (index):434"

【解决方案4】：

你需要先声明你的变量。此外，querySelectorAll 的工作方式与 CSS 选择器相同，因此您需要在类中添加点，以便 querySelector 找到它们。

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

请记住，这将只选择具有这些类的第一个 H1，因此您的 :first-child 在这里有点矫枉过正。

【讨论】：

请注意，对于具有多个类的元素，类名之间不应有任何空格：.product_title.entry-title
op 发布了他们的标记。 querySelector(".product_title .entry-title"); 不起作用。