JavaScript：定義兩個類別之間的距離

我創建了一個簡化的菜單欄和一個額外的控件框。現在我想用JavaScript定義這兩個類之間的間距。 .menu和.widget之間的距離必須是100px不斷。JavaScript：定義兩個類別之間的距離

我怎樣才能使這個可能使用JavaScript？

（我不想使用像CSS填充，保證金或頂級屬性）

.menu { 
 
    background: black; 
 
    height: 50px; 
 
    width: 100%; 
 
    color:red; 
 
} 
 
.widget { 
 
    background: green; 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 5px; 
 
}

<div class="menu">Menu Bar</div> 
 
<div class="widget">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div>

來源

2016-01-04 Otaku Kyon

如果你不使用填充，邊距或頂部，我懷疑你將能夠實現這一點。 –

有沒有你不想使用CSS的原因？ – MinusFour

我無法用CSS做這件事的原因是因爲.menu和.widget之間存在元素。填充或邊距應該沒問題，但只能使用JS –

如果是這樣的HTML

<div class="menu">Menu Bar</div> 
<div class="widget">Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text</div>

，你可以這樣做

var menu = document.getElementsByClassName("menu")[0]; 
var widget = document.getElementsByClassName("widget")[0]; 
var difference = widget.offsetTop - menu.offsetBottom ; 
if (difference > 100) { 
    widget.style.top = (menu.offsetBottom + 100) + "px"; 
}

編輯：

你可能還需要檢查的情況下差小於100，或者，首先，零。

if (difference < 100) { 
    widget.style.top = (menu.offsetBottom + 100) + "px"; 
}

來源

2016-01-04 17:56:00 remdevtec

我做了一些代碼更正，但仍然無法正常工作。你能告訴我，如果widget.style.top引用變量或類？ –

document.getElementsByClassName（「widget」）爲您提供了一個數組（不完全是數組，但您可以從中獲取長度的一些集合，並且可以使用index []引用它的項目）。 – remdevtec

document.getElementsByClassName（「widget」）爲您提供了一個數組（不完全是數組，但您可以從中獲取長度的一些集合，並且可以使用index []引用其項目）。因此，document.getElementsByClassName（「widget」）[0]爲您提供元素的第一個DOM。它是對JavaScript中元素屬性的引用（它不是一個確切的定義）。你可以在這裏看到這些屬性：[link] http://www.w3schools.com/jsref/dom_obj_all.asp style是給你style屬性的屬性。你有這裏的style.top引用：[鏈接] http://www.w3schools.com/jsref/prop_style_top.asp – remdevtec

JavaScript：定義兩個類別之間的距離

回答

相關問題