这可能很简单，但我对 javascript 完全是个菜鸟，对 HTML 还很陌生，所以我很感激能帮上忙。
我在家庭服务器上托管了一个非常简单的网站，我在博客上写了我最喜欢的两个爱好；书籍和旅行。我正在使用我网站上所有页面引用的 CSS 进行布局，并且我有一个简单的 javascript，它添加了一个页脚和一个顶部导航菜单。我喜欢这种方法，因为它使得将来在顶部导航 Pane 中添加按钮变得非常简单，而无需触摸每个单独的页面。我想使用相同的方法向一些 页面添加侧边栏，我已经成功地做到了。但是使用这种方法，我发现我需要将(仅)那些我添加了侧边栏的页面的主体的填充调整了一些像素，这样侧边栏就不会只是融入主体中的文本/图像。我想添加，
document.getElementById("nav03").style.padding = "5px 5px 5px 215px";
我的脚本可以解决问题，但我有点误会了。填充似乎影响了我的侧边栏，而不是我放置“nav03”调用的页面正文。理想情况下，我希望填充更改与页面的“侧边栏”添加一起发生，而不必进行两次单独的调用，但我将其拆分为 nav03 只是为了测试以消除添加侧边栏的代码可能的可能性以某种方式干扰我的目标。下面是我的 CSS、javascript 和一个页面示例，如果有人能指出正确的方向，我想添加侧边栏。我敢肯定，这可能不是添加侧边栏的最佳方式，但它对我来说很舒服，而且将来很容易像顶部导航菜单的工作方式一样进行更改。
document.getElementById("foot01").innerHTML =
"<p>© " + new Date().getFullYear() + " codyfair.kicks-ass.net. All rights reserved.</p>";
document.getElementById("topnav").innerHTML =
"<ul id='topnav'>" +
"<li><a href='index.html'>Home</a></li>" +
"<li><a href='codystravels'>Cody's Travels</a></li>" +
"<li><a href='codyssietch'>The Sietch</a></li>" +
"<li><a href='codysworkshop'>The Workshop</a></li>" +
"</ul>";
document.getElementById("sidebar").innerHTML =
"<ul id='sidebar'>" +
"<li><a href='archivedhikes'>Archived Hikes</a></li>" +
"<li><a href='archivedreviews'>Archived Reviews</a></li>" +
"<li><a href='codyssietch'>The Sietch</a></li>" +
"<li><a href='codysworkshop'>The Workshop</a></li>" +
"</ul>";
document.getElementById("nav03").style.padding = "5px 5px 5px 215px";body {
font-family: "Lucida Sans Unicode", Verdana, sans-serif;
font-size: 16px;
background-color: dimgrey;
color: #000000;
padding: 3px;
}
a:link {color:green; background-color:transparent; text-decoration:underline}
a:visited {color:dimgrey; background-color:transparent; text-decoration:none}
a:hover {color:red; background-color:transparent; text-decoration:underline}
a:active {color:yellow; background-color:transparent; text-decoration:underline}
#main {
padding: 5px;
padding-left: 15px;
padding-right: 5px;
background-color: linen;
border-radius: 0 0 5px 5px;
}
h1 {
font-family: Georgia, serif;
border-bottom: 3px solid dimgrey;
color: dimgrey;
font-size: 30px;
}
h2 {
font-family: Georgia, serif;
color: dimgrey;
font-size: 20px;
}
ul#topnav {
padding: 0;
margin-bottom: 11px;
}
ul#topnav li {
display: inline;
margin-right: 3px;
}
ul#topnav li a {
background-color: linen;
padding: 10px 20px;
text-decoration: none;
color: #696969;
border-radius: 4px 4px 0 0;
}
ul#topnav li a:hover {
color: white;
background-color: black;
}
ul#sidebar {
position:absolute;
top: 60px;
left: 0;
bottom: 0;
height: 100%
}
ul#sidebar li {
margin-right: 3px;
}
ul#sidebar li a {
background-color: linen;
text-decoration: none;
color: #696969;
border-radius: 0px 0px 0 0;
}
ul#sidebar li a:hover {
color: white;
background-color: black;
} <!DOCTYPE html>
<html>
<head>
<title>The Sietch</title>
<link href="cfdesign.css" rel="stylesheet">
</head>
<nav id="topnav"></nav>
<nav id="sidebar"></nav>
<nav id="nav03"></nav>
<body>
<div id="main">
<h1>Currently Reading:</h1>
<p><img src="pics/reading.JPG" align="right"></p>
<p><a href="codyssietch"><i>Einstein: His Life and Universe</i> by Walter Isaacson</a>
<h1><a href="animalfarmreview">The Ten Books You Should Be Beaten For Not Having Read Yet</a></h1>
There are some books you encounter in life that are so moving, so relatable, that they touch you deeply, almost
in the same way a special love would. In many cases you become so attached, that you are almost offended when others have not read these books, or worse yet,
have never heard of them. I am easily offended in this regard, so check out my top ten list, and then go read them! Each book on this list is of course a solid 5 stars.
<h1>Recently Reviewed</h1>
<p>Click each title to read my review, and see my 1-5 star rating.</p>
<h2><a href="spqrreview"><i>S.P.Q.R. A History of Ancient Rome</i> by Mary Beard</a></h2>
<h2><a href="bobbyfischergoestowarreview"><i>Bobby Fischer Goes to War: How the Soviets Lost the Most Extraordinary Chess Match of All Time</i> by David Edmonds & John Eidinow</a></h2>
<h2><a href="thethreemusketeersreview"><i>The Three Musketeers</i> by Alexandre Dumas</a></h2>
<h1>Archived Reviews</h1>
<p><a href="archivedreviews">Click Here for Archived Book Reviews by Year</a></p>
<footer id="foot01"></footer>
</div>
<script src="script.js"></script>
</body>
</html>最佳答案
首先，您真的应该将导航栏放在 body 标签内。
也就是说 - 填充不会影响正文，因为您的目标是 nav03 ID。
相反，定位“主要”ID:
document.getElementById("main").style.padding = "5px 5px 5px 215px";
我相信这就是您要寻找的结果:
编辑
这可能会影响所有页面 - 这不是您正在寻找的结果。您可能希望将侧边导航脚本保存在另一个文件中，并且只将其包含在将呈现侧边导航的页面中。
关于javascript - 使用 Javascript 在某些 HTML 页面上添加侧边栏和更改填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35895779/