Append style to div with JS

Question

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.com/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?

`style` is a property of Node, not a function. Try `document.getElementById("umnip").style.width = "70%";` — Mohammad Usman, Dec 20 '17 at 13:54
Possible duplicate of [Javascript change Div style](https://stackoverflow.com/questions/10071286/javascript-change-div-style) — Turnip, Dec 20 '17 at 13:54
You need to use the [HTMLElement.style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) property Check this post https://stackoverflow.com/a/5195329/4203289 — Alexander Popov, Dec 20 '17 at 13:54

score 3 · Answer 1 · answered Dec 20 '17 at 14:37

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.

score 1 · Answer 2 · answered May 12 '20 at 21:42

IMO this is the better way to do it. I found some of this in other posts but this one comes 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");

Append style to div with JS

2 Answers2