爲什麼我的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錯誤地與這個元素交互？

回答

相關問題