3

我有一个 javascript 函数，当用户单击 div 以获取网页的当前背景颜色（我的笔记本电脑上为白色）时调用该函数：

<div id="div1" onclick="checkbkcolor(id, 1)">Just testing the web page bk color
</div>

这是 checkbkcolor() 函数：

 <head>
 <script type="text/javascript">

 // DOES NOTHING SO I COMMENTED IT OUT: document.body.style.backgroundColor = "red";

 function checkbkcolor(id, val)
 {
     // THIS RETURNS NOTHING FOR THE COLOR -- the alert box
     // only says "the document.body.style.backgroundColor is:  "
     // and nothing else
   alert("the document.body.style.backgroundColor is:  " 
                + document.body.style.backgroundColor);

   document.body.style.backgroundColor = "red";

     // The alert box now shows 'red' for the color name, *AND* 
     // the web page's background has turned all red
   alert("the document.body.style.backgroundColor is:  " 
                     + document.body.style.backgroundColor);
 }
</script>
</head>

换句话说：当页面出现时我的网页背景是白色的，但是没有设置 document.body.style.backgroundColor。

那么我的网页是否设置为“透明”？

我不这么认为。为了测试，我添加了以下 CSS 背景颜色，当网页第一次出现时，整个背景是黄色的：

  body
  {
     background-color: rgb(255,255,0);
  }

现在，当我的网页出现时，它不再是白色的（或透明的，无论如何）。网页出现时为黄色。

还是。以下代码显示未设置背景颜色：

 function checkbkcolor(id, region)
 {
     // THIS RETURNS NOTHING FOR THE COLOR
   alert("the document.body.style.backgroundColor is:  " 
                   + document.body.style.backgroundColor);

   // same code other as above
 }

我的假设是我对“bgColor”、“背景”、“背景颜色”的研究（4 小时）没有帮助。

最重要的是，当我将 CSS 中的“body”设置为 rgb(255,255,0) 时，我不明白整个网页背景是如何变成黄色的，但下面的警告框显示 backgroundColor 未设置：

  alert("the document.body.style.backgroundColor is:  " 
              + document.body.style.backgroundColor);

我需要知道，当页面首次出现时，背景颜色是什么。如何？

编辑：我正在使用最新版本的 Firefox，版本 22.0

4

4 回答 4

20

body你在 alert 中得到一个空值，因为你在读取值之前没有设置背景颜色。在第二个警报中，它为您提供了值，因为您已经设置了它。

document.body.style表示中的内联样式body，而不是样式表中给出的样式。如果您需要获取当前值，则需要window.getComputedStyle()像这样使用：

bgColor = window.getComputedStyle(document.body, null).getPropertyValue('background-color');

请注意，您可以使用 CSS 名称getPropertyvalue()或 JS 样式的 camelCase 名称访问样式属性：

var bodyStyle = window.getComputedStyle(document.body, null);
bgColor = bodyStyle.backgroundColor;
fgColor = bodyStyle.color;
...
于 2013-07-11T08:50:55.043 回答
1

我认为这是因为.style只能访问内联style属性。所以如果你分配<body style="background-color: yellow;">你的脚本可以很好地工作。

于 2013-07-11T08:50:24.307 回答
1

简而言之，styleHTMLElement 实例的属性引用了内联样式定义以及通过 JS ( elem.style[prop] = value) 添加的那些。但是，您可以通过document.defaultView.getComputedStyle.

于 2013-07-11T08:58:22.410 回答
-1

将CSS更改为

 #div1
  {
     background-color: rgb(255,255,0);
  }

并尝试

于 2013-07-11T08:50:02.253 回答