I am trying to append style to a DIV with JS but for some reason I am not succeeding. Maybe I am doing something wrong. Here is my code

document.getElementById("umnip").style("width", "70%");

<link href=".3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress">
    <div id="umnip" class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
      <span class="sr-only">70% Complete</span>
    </div>
  </div>

I am trying to append style to a DIV with JS but for some reason I am not succeeding. Maybe I am doing something wrong. Here is my code

document.getElementById("umnip").style("width", "70%");

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress">
    <div id="umnip" class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
      <span class="sr-only">70% Complete</span>
    </div>
  </div>

Any idea what I am doing wrong?

• javascript
• styles

• 3 style is a property of Node, not a function. Try document.getElementById("umnip").style.width = "70%"; – Mohammad Usman Commented Dec 20, 2017 at 13:54
• 2 Possible duplicate of Javascript change Div style – Turnip Commented Dec 20, 2017 at 13:54
• You need to use the HTMLElement.style property Check this post stackoverflow./a/5195329/4203289 – Alexander Popov Commented Dec 20, 2017 at 13:54

2 Answers 2

I fixed it. First I was not triggering the function that I want the code to be executed... wrong logic. and second this is the js that did the trick.

var el = document.getElementById('umnip');
el.setAttribute('style', 'width:70%;');

I was sure it was something simple... just needed some directions. Thanks.

IMO this is the better way to do it. I found some of this in other posts but this one es up first in google search.

This part works for standard JavaScript. I am pretty sure you can use it to remove all styles as well as add/overwite.

    var div = document.createElement('div');
    div.style.cssText = "border-radius: 6px 6px 6px 6px; height: 250px; width: 600px";

This works for jQuery only

    $("#" + TDDeviceTicketID).attr("style", "padding: 10px;");
    $("#" + TDDeviceTicketID).attr("class", "roundbox1");

    This works for removing it JQUERY
    $("#" + TDDeviceTicketID).removeAttr("style");
    $("#" + TDDeviceTicketID).removeAttr("class");