sol acyon sol acyon - 4 months ago 16
HTML Question

Why is element.style ignored in this JavaScript snippet?

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>




Answer

If you don't specify which CSS property you are styling after element.style then all style properties will be overwritten with whatever style(s) you assign. Change your element.style = 'value' lines to element.style.property = 'value'.

/////////////////////////////////// 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>

Comments