javascripthtmlcsstext-styling

How to use Javascript to add multiple style properties to one element?


I've tried various renditions of this code to try and change a certain element for a coding exercise but non of them seems to be able to change multiple styling properties of an element on a button click. Would love some assistance. Thanks!

document.getElementById("Combo Style").onclick = function() { document.getElementById ("More Text").style.fontSize.color = "50px , #BB65C5"; }


Solution

  • To achieve your expected result use setAttribute
    HTML:

    <button id="Combo Style">Change</button>
    <div id="More Text">abcd</div>
    

    JS:

    document.getElementById("Combo Style").onclick = function() {
      document.getElementById("More Text").setAttribute("style", "font-size:50px;color:red;");
    
    }
    

    http://codepen.io/nagasai/pen/AXVWwO