javascriptcsscssom

Changing the CSSOM css style properties in javascript

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.

Solution

  • 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;
}