1

次のコードで角丸四角形の 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

簡単に言えば、その厄介な「position：absolute」プロパティを要素に追加すると、標準のレイアウトモデルが完成し、それ自体を表現する方法がわかりません。ほとんどのスタイリングを維持したい場合、最も簡単な修正は単に追加することです：

display: inline-block;

あなたの.phraseスタイルのどこかで、少なくともそれは私がすることです。もちろん、Vijayのソリューションは、その行の高さのプロパティを失ってもかまわない限り、うまく機能します。

于 2012-09-19T07:47:50.427 に答える
0

これで問題ないことを願っています。250%の line-height を削除しました。また、マークアップを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>

UPDATE : 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 に答える