Why is my Javascript interacting with this element wrongly?
Here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
MYNAME
11/3/2010
CISC 131
Die.html uses the html within it and the style sheet located in Die.css to create a die whoes functionality is created in Die.js
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="Die.css" rel="stylesheet" type="text/css"/>
<script src="Die.js" type="text/javascript"></script>
<title>Die</title>
</head>
<body>
<div id="game">
<div id="clickableArea" class="banner">
</div>
<div id="dice">
<div id="dot" class="die">
<div id="dot0" class="dot rowOne colOne">•</div><div id="dot1" class="dot rowOne colTwo">•</div><div id="dot2" class="dot rowOne colThree unused">•</div>
<div id="dot3" class="dot rowTwo colOne">•</div><div id="dot4" class="dot rowTwo colTwo">•</div><div id="dot5" class="dot rowTwo colThree">•</div>
<div id="dot6" class="dot rowThree colOne unused">•</div><div id="dot7" class="dot rowThree colTwo">•</div><div id="dot8" class="dot rowThree colThree">•</div>
</div>
<div id="dotB" class="die">
<div id="dotB0" class="dot rowOne colOne">•</div><div id="dotB1" class="dot rowOne colTwo">•</div><div id="dotB2" class="dot rowOne colThree unused">•</div>
<div id="dotB3" class="dot rowTwo colOne">•</div><div id="dotB4" class="dot rowTwo colTwo">•</div><div id="dotB5" class="dot rowTwo colThree">•</div>
<div id="dotB6" class="dot rowThree colOne unused">•</div><div id="dotB7" class="dot rowThree colTwo">•</div><div id="dotB8" class="dot rowThree colThree">•</div>
</div>
</div>
<div id="status" class="banner">
</div>
</div>
</body>
</html>
And then here is the C开发者_StackOverflow中文版SS:
/*
MYNAME
11/3/2010
CISC 131
Dice.css helps Die.html create a Die to be maniupulated by Die.js
*/
*
{
margin: 0;
padding: 0;
}
body
{
font-family: "Times New Roman";
font-size: 12pt;
background-color: #0033CC;
}
.die
{
width: 6em;
height: 6em;
border-style: solid;
border-color: black;
border-width: .25em;
position: relative;
float: left;
margin: 1em;
background-color: #FFFFFF;
}
.dot
{
font-size: 5em;
line-height: .30em;
float: left;
position: relative;
color: red;
}
.banner
{
height: 1.5em;
background-color:#000000;
color: #FFFF00;
}
.rowOne
{
top: .05em;
}
.rowTwo
{
top: .15em;
}
.rowThree
{
top:.25em;
}
.colOne
{
left: .03em;
}
.colTwo
{
left: .08em;
}
.colThree
{
left: .13em;
}
.unused
{
visibility: hidden;
}
#game
{
margin: auto;
width: 20em;
height: 15em;
background-color: #006600;
position: relative;
top: 4em;
}
#dice
{
margin-left: 1.5em;
width: 20em;
height: 8em;
}
#status
{
position: relative;
bottom: -5em;
}
Here is the problem code:
messageLocation=document.getElementById("status");
...
window.alert("alert");
messageLocation.innerHTML="test";
window.alert("alert");
messageLocation.innerHTML="posttest";
This is what happens:
- an alert box pops up that says alert
- the word test is written in left side in the messageLocation element
- another alert box pops up
- the word "posttest" is written in the far right side of the messageLocation element.
messageLocation is a div element that is identified by its id.
Why does 4 happen? why isn't posttest written to the left side just like test was?
The reason for this happening is actually because of the way you're laying out the elements. The basic problem here is that the line-boxes of the dots of the dice are interfering with the relatively positioned status element.
By adding contenteditable to the dice element, we can see exactly how high the line boxes of the dots are. See this fiddle for more detail: http://www.jsfiddle.net/yijiang/AsvLZ/1/
Because even though the individual elements are small, their line-boxes extend out of the parent element and interact with the line-box of the status element, causing the line to start only after the second dice. This is true even after you shift the status element 5 lines down using bottom: -5em. By adding more content to the status box, since the word cannot be broken, the entire word is shifted down one line.
To fix this, we can use position: absolute to position the elements instead. Absolutely positioned elements do not interact with one another, therefore preventing this from happening.
See: http://www.jsfiddle.net/yijiang/AsvLZ for an example of this.
加载中,请稍侯......
精彩评论