使用Javascript添加带绝对位置的span元素会增加高度

单击以下代码中的一个圆角矩形时，需要创建span元素的副本并将其放在原始元素的顶部。代码这样做，但新元素的高度增加。请提出可能出错的地方。使用Javascript添加带绝对位置的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"; 
}

来源

2012-09-19 Amarsh

你最好在jsfiddle.net上做一个工作演示，并粘贴链接，让更多的人可以帮助你。 – Nelson

简单地说，你打出来的标准布局模型，当您添加讨厌“的立场：绝对”属性的元素，它不知道如何表达自己。如果你想保持大部分的造型，最简单的解决将是只需添加：

display: inline-block;

某处你.phrase风格，至少这是我会怎么做。当然，如果您不介意丢失该行高属性，Vijay的解决方案也可以正常工作。

来源

2012-09-19 07:47:50

希望这是好的。刚删除了行高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>

UPDATE：不去除行高。为每个替换的span标签添加行高。

<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-19 07:37:08

我不能删除这250％，因为如果我添加更多标签，它们环绕并开始重叠（尝试添加更多元素到phraseList）。 – Amarsh

使用Javascript添加带绝对位置的span元素会增加高度

回答

相关问题