如果显示元素，则添加css属性

Question

我有一个在某些页面上显示的菜单(这里使用wordpress )。为了确保此菜单不会与内容重叠，我在内容包装中添加了填充。我现在需要的是这个填充只在显示菜单元素(#toc_container)的页面上生效。

是否可以使用css或其他一些技巧？

Answer 1

快速JS-解决方案：

Vanilla

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");
};