要素が表示されている場合にCSSプロパティを追加します。

Question

私は特定のページに表示されているメニューを持っています（ここではwordpressを使用しています）。このメニューがコンテンツと重ならないように、私はコンテンツラップにパディングを追加しました。私が今必要とするのは、このパディングがメニュー要素（#toc_container）を表示するページでのみ有効であることです。

これはCSSを使用して、または他のトリックを使用して可能ですか？

Answer 1

クイックJS-ソリューション：

バニラ

var menu = document.getElementById("toc_container"); 
var body = document.body; 
if (menu !== null) { 
    body.style.paddingTop = menu.clientHeight + "px"; 
} 

jQueryの

var $menu = $("#toc_container"); 
var $body = $("body"); 
if ($menu.length > 0) { 
    $body.css('padding-top', $menu.outerHeight(true)); 
} 

これは、メニューの存在をチェックし、もしそうなら、メニューの高さに等しいパディングを追加します。

Answer 2

友人からの助けを得て、以下を追加しました。魅力的な作品：

if (document.getElementById("toc_container")) 
{ 
    sheet = document.styleSheets[0]; 
    if (sheet.insertRule) sheet.insertRule(".x-container {padding-right: 250px}", sheet.cssRules.length); 
    else if (sheet.addRule) sheet.addRule(".x-container", "padding-right: 250px"); 
};