爲什麼在這個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？

回答

相關問題