当前位置: 首页 > 知识库问答 >
问题:

如何在javascript中定义文档?网络Storm

潘凯
2023-03-14

更新:我修复了颜色与背景颜色的问题。谢谢然而,代码仍然无法从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:文档未定义。

所以我的问题是:如何定义文档?

任何帮助将不胜感激!

共有2个答案

逑阳泽
2023-03-14

您的代码没问题,但您设置的是颜色而不是底色

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

颜色属性用于元素中出现的文本。

您不必(无论如何也不能)使用自己的代码定义文档对象。它是Web浏览器基础架构向您公开的对象。

易炳
2023-03-14

如何定义文档?

一般来说。你没有。

在浏览器中运行的JavaScript在网页中将具有由环境提供的< code>document对象。

WebStorm是一个带有for节点的IDE。JS,并且您似乎正在使用它的Node.js结尾来获得“document is not defined”结果。有一些DOM的实现会给你一个这样的对象,但是你的代码显然是想在网页中运行,所以你不应该往下看。

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

 类似资料:
  • 业务网络定义是Hyperledger Composer编程模型的一个关键概念。它们由在composer-common模块中定义类BusinessNetworkDefinition表示,并由composer-admin和composer-client导出。 业务网络定义由以下部分组成: 一组模型文件 一组JavaScript文件 一个访问控制文件 模型文件定义了业务网络的业务领域,而JavaScri

  • 我尝试克隆我的文档节点,但它不起作用。 我尝试这个代码 我有这个错误 我想这很简单,但我还没找到。 谢谢你的帮助

  • 问题内容: 我使用atocomplete.jquery插件来建议输入文本,结果得到了这个数组: 当我开始搜索从子字符串开始的东西时,它显示出数组排序如下: 我需要这样的东西: 有任何想法吗? 问题答案: 该插件可能区分大小写。尝试输入而不是。您可能将结果设置为不区分大小写。这个问题可能会有所帮助。 对于上的自定义排序函数,您可以使用任何JavaScript函数并将其作为参数传递给的方法,如下所示:

  • 问题内容: 测试JavaScript中是否未定义变量的最合适方法是什么?我已经看到了几种可能的方法: 要么 要么 问题答案: 如果您想知道变量是否已声明而无论其值如何,那么使用运算符是最安全的方法。考虑以下示例: 但这在某些情况下可能不是预期的结果,因为已声明但未初始化变量或属性。使用运算符进行更强大的检查。 如果您想知道变量是否尚未声明或具有值,请使用运算符,该运算符可确保返回字符串: 直接比较

  • 我已经为Word创建了一个插件。我正在尝试通过单击按钮更新word文档中的自定义属性的值。但却得不到拯救。我写的代码是: 但如果我在文档中添加一个空格然后保存它。然后保存自定义属性的值。代码为: 为什么行为是这样的。我不想在我的文档中添加任何额外的空白处。请帮帮我。提前道谢。

  • 需要在内网部署一套用vitepress文档,包含element-plus中文的文档以及自定义组件的文档,但element-plus的md源码都是英文的,gh-pages分支又是html文件,这该怎么做