Changing the CSSOM css style properties in javascript

Question

I am trying to use style.cssText to display hidden paragraphs using javascript. Here is my code:

html:

<p class="toy-pictures-latest">Latest Toy Pictures</p>
         <p class="toy-pictures-greatest">Greatest Toy Pictures</p>

css:

.toy-pictures-latest{
    display: none;
}

.toy-pictures-greatest{
        display: none;
}

js:

toy-pictures-latest.style.cssText = 'display: inline;';

I have also tried

document.getElementById("toy-pictures-latest").style.cssText = 'display: inline;';

Please see the codepen: Codepen

Please let me know how I should be approaching this problem.

Something like this? document.getElementById("toy-pictures-latest").style.display = "inline"; — caston, Sep 12 '20 at 10:43
I tried it in a codepen [here](https://codepen.io/j354374/pen/XWdqqQj) I get: TypeError: document.getElementById(...) is null — caston, Sep 12 '20 at 10:49
Is that you are using 'getElementById', but in the elements you use class and not id — Aks Jacoves, Sep 12 '20 at 10:55
Use: `document.querySelector('.toy-pictures-greatest').style.display = 'inline'` — Aks Jacoves, Sep 12 '20 at 10:55

caston · Accepted Answer · 2020-09-12T13:26:30.800

0

js:

document.getElementById("toy-pictures-latest").style.display = "inline";

html:

<p id="toy-pictures-latest">Latest Toy Pictures</p>

css:

#toy-pictures-latest{
    display: none;
}

edited Sep 12 '20 at 13:26

answered Sep 12 '20 at 11:02

caston

1 Answers1