1

单击以下代码中的圆角矩形之一时，需要创建 span 元素的副本并将其放置在原始元素的顶部。代码会这样做，但新元素的高度增加了。请提出可能出错的地方。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<body>

<div id="phrasesDiv" style="line-height:250%" /></div>

<style type="text/css">
.phrase {
    font-size:18pt;
    color:blue;
    background: palegreen;
    border:2px solid green;
    padding:2px 10px 2px 10px;
    -webkit-border-radius:10px;
}
</style>

<script type="text/javascript">

{
    // create the phrase list dynamically
    var phraseList = "Apple~Orange~Kiwi~Guava";
    var phrasesDiv = document.getElementById("phrasesDiv");
    var phrases = phraseList.split('~');
    for (var i=0; i<phrases.length; i++)
        phrasesDiv.innerHTML += "<span id=\""+phrases[i]+"\" class=\"phrase\" onmousedown=\"phraseTouched('"+phrases[i]+"')\">"+phrases[i]+"</span>&nbsp;&nbsp;&nbsp;\n";
}

function getDim(el) {
    var lw = el.offsetWidth;
    var lh = el.offsetHeight;
    for (var lx=0, ly=0; el != null; lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
    return {x:lx,y:ly,w:lw,h:lh};
}

function phraseTouched(id) {
    var elem = document.getElementById(id);
    var dim = getDim(elem);
    var dragElem = document.createElement('span')
    dragElem.id = id+"_copy";
    dragElem.innerHTML = id;
    dragElem.className += " phrase";
    dragElem.style.background = "pink";
    dragElem.style.position = "absolute";
    dragElem.style.left =  dim.x+"px";
    dragElem.style.top =  dim.y+"px";
    elem.parentNode.appendChild(dragElem);
}

</script>

</html>

编辑：以下功能有效......但我仍然很想知道如果我以编程方式添加到 div 会增加高度。

function phraseTouched(id) {
    var elem = document.getElementById(id); 
    var dim = getDim(elem); 
    document.body.innerHTML += "<span id=\"_"+id+"\" class=\"phraseDrag\" style=\"left:"+dim.x+"px;top:"+dim.y+"px;position:absolute;\">"+id+" </span>\n";  
}
4

2 回答 2

2

简而言之，当您将讨厌的“位置：绝对”属性添加到您的元素并且它不知道如何表示自己时，您打破了标准布局模型。如果您想保持大部分样式，最简单的解决方法是简单地添加：

display: inline-block;

在你的 .phrase 风格的某个地方，至少我会这样做。当然，只要您不介意丢失 line-height 属性，Vijay 的解决方案就可以正常工作。

于 2012-09-19T07:47:50.427 回答
0

希望这没问题。刚刚删除了250% 的行高。还将标记更改为W3C 标准（不完全）

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Demo</title>
        <style type="text/css">
            .phrase {
                font-size:18pt;
                color:blue;
                background: palegreen;
                border:2px solid green;
                padding:2px 10px 2px 10px;
                -webkit-border-radius:10px;
            }
        </style>
    </head>

    <body>
        <div id="phrasesDiv"></div>
        <script type="text/javascript">

            // create the phrase list dynamically
            var phraseList = "Apple~Orange~Kiwi~Guava";
            var phrasesDiv = document.getElementById("phrasesDiv");
            var phrases = phraseList.split('~');
            for (var i=0; i<phrases.length; i++)
                phrasesDiv.innerHTML += "<span id=\""+phrases[i]+"\" class=\"phrase\" onmousedown=\"phraseTouched('"+phrases[i]+"')\">"+phrases[i]+"</span>&nbsp;&nbsp;&nbsp;\n";

            function getDim(el) {
                var lw = el.offsetWidth;
                var lh = el.offsetHeight;
                for (var lx=0, ly=0; el != null; lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
                return {x:lx,y:ly,w:lw,h:lh};
            }

            function phraseTouched(id) {
                var elem = document.getElementById(id);
                var dim = getDim(elem);
                var dragElem = document.createElement('span')
                dragElem.id = id+"_copy";
                dragElem.innerHTML = id;
                dragElem.className += " phrase";
                dragElem.style.background = "pink";
                dragElem.style.position = "absolute";
                dragElem.style.left =  dim.x+"px";
                dragElem.style.top =  dim.y+"px";
                elem.parentNode.appendChild(dragElem);
            }

        </script>
    </body>
</html>

更新：不删除行高。为每个替换的 span 标签添加了 line-height。

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Demo</title>
        <style type="text/css">
            .phrase {
                font-size:18pt;
                color:blue;
                background: palegreen;
                border:2px solid green;
                padding:2px 10px 2px 10px;
                -webkit-border-radius:10px;
            }
        </style>
    </head>
    <body>
        <div style="height:100%;width:500px;border:1px solid #B0B0B0;">
            <div id="phrasesDiv" style="line-height:250%;"></div>
        </div>
        <script type="text/javascript">

            // create the phrase list dynamically
            var phraseList = "Apple~Orange~Kiwi~Guava~Test1~Test2~Test3~Test4~Test5~Test6~Test7~Test8~Test9~Test10";
            var phrasesDiv = document.getElementById("phrasesDiv");
            var phrases = phraseList.split('~');
            for (var i=0; i<phrases.length; i++)
            {
                phrasesDiv.innerHTML += "<span id=\""+phrases[i]+"\" class=\"phrase\" onmousedown=\"phraseTouched('"+phrases[i]+"')\">"+phrases[i]+"</span>&nbsp;&nbsp;&nbsp;\n";
            }

            function getDim(el) {
                var lw = el.offsetWidth;
                var lh = el.offsetHeight;
                for (var lx=0, ly=0; el != null; lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
                return {x:lx,y:ly,w:lw,h:lh};
            }

            function phraseTouched(id) {
                var elem = document.getElementById(id);
                var dim = getDim(elem);
                var dragElem = document.createElement('span')
                dragElem.id = id+"_copy";
                dragElem.innerHTML = id;
                dragElem.className += " phrase";
                dragElem.style.background = "pink";
                dragElem.style.position = "absolute";
                dragElem.style.left =  dim.x+"px";
                dragElem.style.top =  dim.y+"px";
                dragElem.style.lineHeight = "27px";
                elem.parentNode.appendChild(dragElem);
            }

        </script>
    </body>
</html>
于 2012-09-19T07:37:08.473 回答