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

Question

Im trying to insert CSS style to a h1 class element. It worked before i updated mmy theme, but for some reason it doesnt work now. Anyone know why?

I've tried getElementsByClassName and [0] to find arrays, nothing is working for me. The CSS class has display:none, because i want the title to only show on pages that contains the class "product_title entry-title". So when it find that class, it should put a CSS class to the element to display:block, so that it will show on those pages.

 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

You are missing dot . while selecting the element using querySelector.Dot . is required to select the element using it's class.

Also one class will be enough to select the element

 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

You need to declare your variable first. Also, querySelectorAll works the same way as CSS selectors so you'll need to add dots to your classes for querySelector to find them.

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

Bear in mind this will select only the first H1 with those classes so your :first-child is a bit overkill here.

Answer 3

You seem to have misunderstood the use of the querySelector method. Instead of just listing the classes of the desired element all delimited by a space, each class name must be preceded by a full stop . and if your desired element has more than one class, the classes should not have whitespace inbetween them. See the corrected code snippet:

 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

Use jQuery .css() method for changing css properties. It will apply to all elements which were chosen by selector (in this case it is 'h1') If you want to change only one element add .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>