gpt4 book ai didi

javascript - 为什么 element.style 在此 JavaScript 代码段中被忽略?

转载 作者:行者123 更新时间:2023-11-28 16:10:53 26 4
gpt4 key购买 nike

我的 JavaScript 文件的第 8 行:document.body.style.backgroundColor = "#fe0"; 被完全忽略了。 我可以重新排列我的代码中的行,当然也可以将我所有的 CSS 放在一个 CSS 文件中,这个问题就解决了。我的问题仍然是为什么会发生这种情况。值得注意的是这段代码在 IE11 中做了一些稍微不同的事情,这是我第一次注意到它的方式。 IE11 会忽略 body 元素上的 height 属性,而不是 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>

最佳答案

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

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

关于javascript - 为什么 element.style 在此 JavaScript 代码段中被忽略?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38357798/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com