javascript - 如果显示元素，则添加 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));
}

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