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

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

2 个答案: