0
我在使用Javascript修改HTML時遇到問題。一個例子可以在這裏找到:https://jsfiddle.net/02mwyvyo/爲什麼我的精確網頁佈局不準確?
我的目標是將一個特定元素向下移動頁面。我試圖通過在目標元素之前插入一個間隔符div
來做到這一點。間隔div
的風格屬性是style="display: inline-block; width=1px; height=100px;"
。
這裏是我使用的代碼:
function describeDOMRect(rect) {
return "{ top: " + rect.top + ", left: " + rect.left + ", bottom: " + rect.bottom + ", right: " + rect.right + " }"
}
function addVerticalSpacer() {
var div = document.getElementsByClassName("target-div")[0]
var bounds = div.getBoundingClientRect()
console.log("old bounds: " + describeDOMRect(bounds))
var spacerHeight = 100
var newTop = bounds.top + spacerHeight
var spacer = document.createElement("div")
spacer.className = "spacer"
spacer.setAttribute("style", "display: inline-block; width: 1px; height: " + spacerHeight + "px;")
div.parentNode.insertBefore(spacer, div)
bounds = div.getBoundingClientRect()
console.log("new bounds: " + describeDOMRect(bounds))
}
,這裏是應用於div
的CSS屬性:
div {
border: none;
border-width: 0;
padding: 0;
margin: 0;
}
當我運行上面的代碼,這是我在看控制檯:
old bounds: { top: 26, left: 8, bottom: 26, right: 729 }
new bounds: { top: 112, left: 8, bottom: 112, right: 729 }
注意舊的頂部位置是26,所以我期望新的頂部是126,但它我s 112.
爲什麼會發生這種情況?我能做些什麼來糾正它?
啊。如何讓它在文本之後開始打破? – par
使用'display:block'而不是'inline-block'。你打算在哪裏插入視覺空間? – connexo
請將其添加到您的答案,我會接受它。你是我的英雄。 – par