Javascript 定位元素

Question

我尝试动态创建输入控件，除了定位之外工作正常，出于某种原因我不能将元素放在前一个元素下，因为我无法获得“style.top”属性。我做错了什么，我该如何解决？

HTML代码:

<div id='div_attach' class='scrollbox' style='top: 380px; height: 65px; left: 100px; right: 135px;'>
  <a href='goes_nowhere' style='top: 5px; left: 5px;'>click_me_if_you_dare</a>
</div>
<button type='button' style='top: 380px; width: 120px; right: 10px; height: 20px;' onclick='createFileInput("div_attach");'>new input</button>

JS代码:

function createFileInput(parentID) {
  var atop, index;
  var parent = document.getElementById(parentID);
  var control = document.createElement('input');

  control.setAttribute('type', 'file');
  elements = parent.getElementsByTagName('*');

  // debug only ...
  for (index = 0; index < elements.length; ++index) {
    alert(elements[index].style.top);
    alert(elements[index].style.height);
  };

  if (elements.length > 0)
    atop = elements[elements.length - 1].style.top + elements[elements.length - 1].style.height + 5;
  else
    atop = 5;
  control.setAttribute('name', 'FILE_' + elements.length);
  control.className = 'flat'; 
  control.style.left = 5 + 'px'; 
  control.style.top = atop + 5 + 'px'; 
  //  control.style.top = (elements.length * 30) + 5 + 'px'; 
  control.style.width = 500 + 'px'; 

  parent.appendChild(control);
  control.focus();
}

Answer 1

代码:

atop = elements[elements.length - 1].style.top + elements[elements.length - 1].style.height + 5;

将返回类似于 "5px5" 的内容因为它是您附加 5 的字符串.

替换为

atop = parseInt(elements[elements.length - 1].style.top, 10) + parseInt(elements[elements.length - 1].style.height, 10) + 5;

确保这些元素有 top和 height值，否则 parseInt()将返回 NaN .

编辑:在示例中，<a>没有高度。