Question

这是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">&#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";

这就是：

会弹出一个警告框，显示警告
单词test在左侧写入messageLocation元素
弹出另一个警告框
“posttest”一词写在messageLocation元素的最右侧。

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

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

Answer 1

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

alt text

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

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

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

有关此示例，请参阅：http://www.jsfiddle.net/yijiang/AsvLZ。

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

1 个答案: