如何在javascript中定义一个文档？网络风暴答案

【问题标题】：How to define a document in javascript? WebStorm如何在javascript中定义一个文档？网络风暴
【发布时间】：2015-01-28 01:13:48
【问题描述】：

更新：我修复了颜色与背景颜色的问题。谢谢！但是，代码仍然不会从 WebStorm 运行。有没有 WebStorm 专家？

我正在学习 javascript 并尝试使用 js 操作 css。这是我的代码：

document.getElementById("top-left").style.color = "blue";

body{
    background-color: black;
}

.container {
    text-align:center;
    position: absolute;
    width: 100%;
    margin: 0 auto;
    padding-top: 2.5%;
    padding-left: 30%;
    width: 31em;
}

#title {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 50%;
    color: green;
    font-size: 4em;
}

#top-left {
    width: 15em;
    height: 15em;
    background: red;
    border-top-left-radius: 100% ;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    display: inline-block;
    position: relative;


}

#top-right {
    width: 15em;
    height: 15em;
    background: gold;
    border-top-left-radius: 0 ;
    border-top-right-radius: 100%;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    display: inline-block;
    position: relative;




}

#bottom-right {
    width: 15em;
    height: 15em;
    background: orangered;
    border-top-left-radius: 0 ;
    border-top-right-radius: 0;
    border-bottom-right-radius: 100%;
    border-bottom-left-radius: 0;
    display: inline-block;
    position: relative;


}

#bottom-left {
    width: 15em;
    height: 15em;
    background: darkgreen;
    border-top-left-radius: 0 ;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 100%;
    display: inline-block;
    position: relative;

}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="jscode.js"></script>
    <title>title</title>
</head>
<body>

<div id = "title">Title</div>
<div class = "container">
    <div id = "top-left"></div>
    <div id= "top-right"></div>
    <div id = "bottom-left"></div>
    <div id = "bottom-right"></div>

</div>


</body>
</html>

在小提琴 (http://jsfiddle.net/interestinall/hgo7h5v4/) 上，脚本什么也不做。在 WebStorm 上，它会抛出以下错误：ReferenceError: document is not defined。

所以我的问题是：如何定义文档？

任何帮助将不胜感激！

【问题讨论】：

因为这是关于 WebStorm 的，所以它应该作为一个新问题提出，有足够的标题、足够的标签以及以可重现的方式对问题进行充分的描述。

标签： javascript html css webstorm

【解决方案1】：

如何定义文档？

一般来说。你没有。

在浏览器中运行的 JavaScript，在网页中将有一个由环境提供的 document 对象。

WebStorm 是一个用于 Node.JS 的 IDE，您似乎正在使用它的 Node.js 端来获得“文档未定义”的结果。有 DOM 的实现会给你这样一个对象，但你的代码显然是试图在网页中运行，所以这不是你应该往下看的路线。

您的问题是您正在设置前景 color，并且您没有任何文本可以更改颜色。您应该查看 backgroundColor 属性。

【讨论】：

如果我理解你的话，你是说我不应该在 WebStorm 中这样做，因为这不是它的目的。您能否为我的目的推荐另一个 IDE？谢谢！
@interestinall，Webstorm 本身并不局限于服务器端代码。如果您安装了它的浏览器扩展，那么它可以劫持浏览器以调试页面及其上下文中的任何脚本。您需要根据加载脚本的文档（html）进行调试，因为单独运行引用 DOM/BOM/etc 的脚本是没有意义的。

【解决方案2】：

您的代码没问题，但您设置的是 color 而不是 backgroundColor。

document.getElementById("top-left").style.backgroundColor = "blue";

color 属性用于显示在元素中的文本。

您不必（也不能）用您自己的代码定义document 对象。它是 Web 浏览器基础架构向您公开的对象。

【讨论】：

好吧，我猜你可以在一些合适的环境（节点）中定义document，但在浏览器中没有意义。
感谢您和其他因 backgroundColor 错误而发现的人。