admin管理员组文章数量:1415684
UPDATE: I fixed the color vs backgroundColor problem. Thanks! However, the code still will not run from WebStorm. Any WebStorm experts out there?
I am learning javascript and trying to manipulate css with js. Here is my code:
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>UPDATE: I fixed the color vs backgroundColor problem. Thanks! However, the code still will not run from WebStorm. Any WebStorm experts out there?
I am learning javascript and trying to manipulate css with js. Here is my code:
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>On the fiddle (http://jsfiddle/interestinall/hgo7h5v4/), the script just doesn't do anything. On WebStorm, it throws the following error: ReferenceError: document is not defined.
So my question is: how does one define a document?
Any help would be greatly appreciated!
Share Improve this question edited Nov 29, 2014 at 17:07 interestinall asked Nov 29, 2014 at 16:44 interestinallinterestinall 171 silver badge3 bronze badges 1- As this is about WebStorm, it should be asked as a new question, with adequate title, adequate tagging, and adequate description of the problem in a reproduceable manner. – Jukka K. Korpela Commented Nov 29, 2014 at 17:04
2 Answers
Reset to default 2how does one define a document?
Generally speaking. You don't.
JavaScript running in a browser, in a webpage will have a document object supplied by the environment.
WebStorm is an IDE with for Node.JS, and you appear to be using the Node.js end of it to get your "document is not defined" result. There are implementations of DOM which would give you such an object there, but your code is clearly trying to run in a webpage, so that isn't a route you should be looking down.
Your problem is that you are setting the foreground color, and you don't have any text to change the colour of. You should be looking at the backgroundColor property instead.
Your code is fine, but you're setting color instead of backgroundColor.
document.getElementById("top-left").style.backgroundColor = "blue";
The color property is for text that appears in the element.
You don't have to (and can't, anyway) define the document object with your own code. It's an object exposed to you by the web browser infrastructure.
本文标签： htmlHow to define a document in javascript WebStormStack Overflow
版权声明：本文标题：html - How to define a document in javascript? WebStorm - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745218667a2648290.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论