为什么在这个JavaScript代码段中忽略了element.style？

我的JavaScript文件第8行：document.body.style.backgroundColor = "#fe0";完全被忽略。 我可以对代码中的行进行重新排序，或者将所有CSS放入CSS文件中，并解决此问题。我的问题仍然是为什么发生这种情况值得注意的是，这段代码在IE11中做了些微不同，这是我第一次注意到它。 IE11忽略body元素上的height属性而不是background-color。为什么这个javascript产生的输出不同如果我只是添加了一个CSS文件呢？为什么在这个JavaScript代码段中忽略了element.style？

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

来源

2016-07-13 sol acyon

，也可以移动该行至底部，使得它的最后一件事要做。 – arcee123

的问题是，你完全被做

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

这就是为什么样式对象的早期属性集缺少覆盖document.body的风格对象。

由于style是一个对象，因此应该设置对象的各个属性以避免任何覆盖。

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>

来源

2016-07-13 17:18:12 Deep

为什么在这个JavaScript代码段中忽略了element.style？

回答

相关问题