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>没有高度。

Javascript定位元素

1 个答案: