为什么我的Javascript错误地与这个元素交互？

下面是HTML：为什么我的Javascript错误地与这个元素交互？

<!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">&#8226;</div><div id="dot1" class="dot rowOne colTwo">&#8226;</div><div id="dot2" class="dot rowOne colThree unused">&#8226;</div> 
        <div id="dot3" class="dot rowTwo colOne">&#8226;</div><div id="dot4" class="dot rowTwo colTwo">&#8226;</div><div id="dot5" class="dot rowTwo colThree">&#8226;</div> 
        <div id="dot6" class="dot rowThree colOne unused">&#8226;</div><div id="dot7" class="dot rowThree colTwo">&#8226;</div><div id="dot8" class="dot rowThree colThree">&#8226;</div> 
      </div> 

      <div id="dotB" class="die"> 
        <div id="dotB0" class="dot rowOne colOne">&#8226;</div><div id="dotB1" class="dot rowOne colTwo">&#8226;</div><div id="dotB2" class="dot rowOne colThree unused">&#8226;</div> 
        <div id="dotB3" class="dot rowTwo colOne">&#8226;</div><div id="dotB4" class="dot rowTwo colTwo">&#8226;</div><div id="dotB5" class="dot rowTwo colThree">&#8226;</div> 
        <div id="dotB6" class="dot rowThree colOne unused">&#8226;</div><div id="dotB7" class="dot rowThree colTwo">&#8226;</div><div id="dotB8" class="dot rowThree colThree">&#8226;</div> 
      </div> 
     </div> 

     <div id="status" class="banner"> 
     </div> 
    </div> 
</body> 
</html>

然后这里是CSS：

/* 
    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; 
}

这里的问题是代码：

messageLocation=document.getElementById("status");

...

window.alert("alert"); 
    messageLocation.innerHTML="test"; 
    window.alert("alert"); 
    messageLocation.innerHTML="posttest";

这是发生了什么事S：

一个警告框弹出，上面写着警告
字测试是写在左侧的messageLocation元素
另一个警告框弹出
词“后测”被写入messageLocation元素的最右侧。

messageLocation是一个由其ID标识的div元素。

为什么4会发生？为什么不像测试那样将测验写在左侧？

来源

2010-11-08 David

什么样的元素是messageLocation？ – wombleton 2010-11-08 04:12:10

eddited回答。 – David 2010-11-08 04:14:38

这将有助于看到HTML/CSS来解决这个问题。 – dpmguise 2010-11-08 04:24:22

发生这种情况的原因实际上是因为您布置元素的方式。这里的基本问题是骰子点的线盒干扰了相对定位的状态元素。

alt text

通过添加contenteditable骰子元素，我们可以看到点的线框究竟有多高。请参阅此小提琴以了解更多详细信息：http://www.jsfiddle.net/yijiang/AsvLZ/1/

因为即使单个元素很小，它们的线框也会伸出父元素并与状态元素的线框交互，导致线条仅在第二个骰子。即使在使用bottom: -5em将状态元素向下移动5行后，情况也是如此。通过向状态框添加更多内容，由于该单词不能被破坏，整个单词将向下移动一行。

要解决这个问题，我们可以使用position: absolute来替换元素的位置。绝对定位的元素不会相互影响，因此可以防止发生这种情况。

参见：http://www.jsfiddle.net/yijiang/AsvLZ的一个例子。

来源

2010-11-08 05:38:19

只需在'.die'上设置'margin-bottom：0'即可。 – Chuck 2010-11-08 05:40:33

有反正他们的lineboxes更小，以保持他们的parrent元素内？无论如何，线框是什么？ – David 2010-11-08 05:46:43

@牛仔，试了一下。不，它不是 – David 2010-11-08 05:48:26

为什么我的Javascript错误地与这个元素交互？

回答

相关问题