Why is element.style ignored in this JavaScript snippet?

Question

Line 8 of my JavaScript file: document.body.style.backgroundColor = "#fe0"; is completely ignored. I can re-order the lines in my code, or of course put all of my CSS in a CSS file and this problem is fixed. Still my question is why this happens. It's worth noting this code does something slightly different in IE11, which is how I first noticed it. IE11 ignores the height property on the body element instead of the background-color. Why does this javascript produce a different output than If I just added a CSS file instead?

/////////////////////////////////// INITIAL ///////////////////////////////////
'use strict';
function start() {
  var div = document.createElement('div'),
      h1 = document.createElement('h1'),
      str = document.createTextNode('begin');
  h1.appendChild(str); div.appendChild(h1); document.body.appendChild(div);
  document.body.style.backgroundColor = "#fe0"; //why is this ignored?
  div.style.backgroundColor = "#555"; div.style.color = "#eee";
  div.style.width = "140px"; div.style.margin = "0 auto";
  div.style.height = "140px"; div.style.position = 'relative';
  div.style.top = '50%'; div.style.transform = 'translateY(-50%)';
  document.body.style = "height:100%"; h1.style.margin = "0";
  div.style.textAlign = 'center'; div.style.lineHeight = '140px';
  document.documentElement.style = "height:100%";
}
start();

@import url('https://necolas.github.io/normalize.css/4.1.1/normalize.css');

<!doctype html>
<html lang="en-US">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8"> <meta name="robots" content="noindex, nofollow">
    <title>shell 7.2016 | blueprint: Edge</title>
  </head>
  <body>
<!-- -------------------------------- COMMENT ----------------------------- -->  
  </body>
</html>

you can also move that line to the bottom, making it the last thing to do. — arcee123
– arcee123, Commented Jul 13, 2016 at 17:09

Deep · Accepted Answer · 2016-07-13 17:18:12Z

the problem is that you are completely overwriting the style object of document.body by doing

document.body.style = "height:100%";

that is why the earlier set properties of style object are missing.

Since style is an object, you should set the individual properties of the object to avoid any overwriting.

document.body.style.height = "100%";

/////////////////////////////////// INITIAL ///////////////////////////////////
'use strict';
function start() {
  var div = document.createElement('div'),
      h1 = document.createElement('h1'),
      str = document.createTextNode('begin');
  h1.appendChild(str); div.appendChild(h1); document.body.appendChild(div);
  document.body.style.backgroundColor = "#fe0"; //why is this ignored?
  div.style.backgroundColor = "#555"; div.style.color = "#eee";
  div.style.width = "140px"; div.style.margin = "0 auto";
  div.style.height = "140px"; div.style.position = 'relative';
  div.style.top = '50%'; div.style.transform = 'translateY(-50%)';
  document.body.style.height = "100%"; 
  h1.style.margin = "0";
  div.style.textAlign = 'center'; div.style.lineHeight = '140px';
  document.documentElement.style = "height:100%";
}
start();

@import url('https://necolas.github.io/normalize.css/4.1.1/normalize.css');

<!doctype html>
<html lang="en-US">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8"> <meta name="robots" content="noindex, nofollow">
    <title>shell 7.2016 | blueprint: Edge</title>
  </head>
  <body>
<!-- -------------------------------- COMMENT ----------------------------- -->  
  </body>
</html>

Collectives™ on Stack Overflow

Why is element.style ignored in this JavaScript snippet?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related