Question

我的JavaScript文件的第8行：document.body.style.backgroundColor = "#fe0";完全被忽略。 我可以在我的代码中重新排序这些行，或者当然把我所有的CSS放在一个CSS文件中，这个问题已修复。我的问题仍然是为什么会发生这种情况。值得注意的是，这段代码在IE11中略有不同，这是我第一次注意到它。 IE11忽略height元素上的body属性而不是background-color。为什么这个javascript产生的输出不同于我刚刚添加了一个CSS文件？

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

问题是你完全覆盖了document.body的样式对象

    tetris.c:11:1: warning: initialization from incompatible pointer type [enabled by default]
 const Shape S_shape = {2,3, (char [][3]){{0,1,1},{1,1,0}}};
 ^
tetris.c:11:1: warning: (near initialization for ‘S_shape.shape’) [enabled by default]
tetris.c:12:1: warning: initialization from incompatible pointer type [enabled by default]
 const Shape Z_shape = {2,3, (char [][3]){{1,1,0},{0,1,1}}};
 ^
tetris.c:12:1: warning: (near initialization for ‘Z_shape.shape’) [enabled by default]
tetris.c:13:1: warning: initialization from incompatible pointer type [enabled by default]
 const Shape T_shape = {2,3, (char [][3]){{0,1,0},{1,1,1}}};
 ^
tetris.c:13:1: warning: (near initialization for ‘T_shape.shape’) [enabled by default]
tetris.c:14:1: warning: initialization from incompatible pointer type [enabled by default]
 const Shape L_shape = {2,3, (char [][3]){{0,0,1},{1,1,1}}};
 ^
tetris.c:14:1: warning: (near initialization for ‘L_shape.shape’) [enabled by default]
tetris.c:15:1: warning: initialization from incompatible pointer type [enabled by default]
 const Shape ML_shape = {2,3, (char [][3]){{1,0,0},{1,1,1}}};
 ^
tetris.c:15:1: warning: (near initialization for ‘ML_shape.shape’) [enabled by default]
tetris.c:16:1: warning: initialization from incompatible pointer type [enabled by default]
 const Shape SQ_shape = {2,2, (char [][2]){{1,1},{1,1}}};
 ^
tetris.c:16:1: warning: (near initialization for ‘SQ_shape.shape’) [enabled by default]
tetris.c:17:1: warning: initialization from incompatible pointer type [enabled by default]
 const Shape R_shape = {1,4, (char [][4]){{1,1,1,1}}};
 ^
tetris.c:17:1: warning: (near initialization for ‘R_shape.shape’) [enabled by default]

这就是缺少早期设置的样式对象属性的原因。

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

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

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');

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

1 个答案: