4

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

peterh
  • 11,875
  • 18
  • 85
  • 108
West Coast Charlie
  • 103
  • 1
  • 2
  • 9
  • 1
    Possible duplicate of [How to set multiple css style properties in Javascript](http://stackoverflow.com/questions/3968593/how-to-set-multiple-css-style-properties-in-javascript) – Sebastian Simon Jul 18 '16 at 00:43

3 Answers3

2

You can use cssText property but it will change the styling for the element completely

Style cssText Property

document.getElementById("myP").style.cssText = "background-color:pink;font-size:55px;border:2px dashed green;color:white;"

This will overwrite the existing css styling for that element , so make sure you included every needed property.

Hany Afifi
  • 67
  • 5
0

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

Naga Sai A
  • 10,771
  • 1
  • 21
  • 40
-2

You need to grab the element by using id or any selector and use style property or css text property to apply css. Check the below code - 

    var element=document.getElementById("More Text");
    element.style.fontSize="20px";
    element.style.color="red";
    element.style.background="blue";

You can also use cssText property, like -

document.getElementById("More Text").style.cssText='fontSize="20px";color="red";'

This will insert an inline style tag in the element with the csstext property.

Ujjwal Kumar Gupta
  • 2,308
  • 1
  • 21
  • 32
  • 1
    Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this". – abarisone Jul 18 '16 at 07:24