Javascript定位元素

我嘗試動態地創建輸入控件，除了定位之外還能正常工作，出於某種原因，我不能將元素放在前一個元素下面，因爲我無法獲取「style.top」屬性。我在做什麼錯了，我該如何解決它？Javascript定位元素

的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(); 
}

來源

2014-02-21 tcxbalage

代碼：

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

來源

2014-02-21 18:49:10 Skwal

完美的方式擊中頭部！ – statue

非常感謝，差不多在那裏，唯一的問題是現在「style.height」屬性返回NULL。任何想法？ – tcxbalage

@tcxbalage在此示例中，沒有高度。 – Skwal

Javascript定位元素

回答

相關問題