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

【问题标题】：add css property if element is displayed如果显示元素，则添加 css 属性
【发布时间】：2016-11-07 21:03:25
【问题描述】：

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

这可以使用 css 还是使用其他技巧？

【问题讨论】：

标签： javascript jquery css wordpress menu

【解决方案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));
}

这会检查菜单是否存在，如果存在则添加一个等于菜单高度的填充。

【讨论】：

【解决方案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");
};

【讨论】：