我正在尝试让 Reddit 导航栏只显示几个子版 block ,如下所示: http://i.imgur.com/eDOdUBJ.png
使用来自另一个用户脚本 (https://greasyfork.org/en/scripts/12571-expand-subreddit-header) 的代码,我能够删除文本:
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML =
"#sr-header-area .flat-list > li { white-space: initial !important; } " +
"#sr-header-area .dropdown.srdrop { padding-left: 0 !important; }" +
".sr-list { display: inline !important; visibility: hidden; } " +
"#sr-header-area > .width-clip { position: initial !important; padding-left: 5px !important; } " +
"#sr-more-link { display: none !important; } " +
".dropdown.srdrop { display: none !important; }";
document.head.appendChild(css);
但是,我一直在想办法用文本链接替换它。带有两个链接的导航栏代码如下所示:
<div id="sr-header-area">
<div class="width-clip">
<div class="sr-list">
<span class="separator"> </span>
<ul class="flat-list sr-bar hover" id="sr-bar">
<li><a href="https://www.reddit.com/r/AskReddit/" class="choice">AskReddit</a></li>
<li><span class="separator">-</span><a href="https://www.reddit.com/r/funny/" class="choice">funny</a></li>
</ul>
</div>
</div>
</div>
如有任何帮助,我们将不胜感激。谢谢。
最佳答案
使用 Chrome 开发工具(或 Firebug 或类似工具),使用“检查元素”功能点击一个项目并在检查窗口中找到它。
从这里,您将能够看到与该项目关联的层次结构列表,以及该项目或其父级和兄弟级的标识符。
请看下面的截图:
- 已检查第一个 Subreddit 项目,如主网页窗口中蓝色叠加层和黄色弹出窗口所示。
- 网页下方是检查器。鼠标悬停在第一个 Subreddit 链接“AskReddit”上。
- HTML 的正下方是层次结构列表,以蓝色显示所选元素,其父元素位于列表左侧,其子元素位于右侧。
- 使用此 View ,我们可以看到 subreddit 栏本身的 ID 为“sr-bar”,您要删除的项目包含在列表的“LI”项目中。
在 JavaScript 中,我们可以通过使用 querySelectorAll
并传入匹配所有项目的 CSS 选择器来获取子版 block 列表的引用。
使用 for 循环,我们可以遍历和操作 subreddits 列表。您可以在下面看到如何遍历除第一个之外的所有子版 block ,并将它们从页面中删除。
var subredditListItems = document.querySelectorAll("#sr-bar>li");
for(var i = 1, len = subredditListItems.length; i < len; i++) {
listOfItems[i].remove();
}
也可以用其他方式操作列表。例如,看起来您会从添加或更改列表项中受益。以下是如何在此处添加我自己的链接的示例:
var subredditListBar = document.querySelectorAll("#sr-bar");
var subredditItem = document.createElement("li");
var link = document.createElement("a");
link.href = "http://stackoverflow.com";
link.textContent = "Stack Overflow!";
subredditItem.appendChild(link);
subredditListBar.appendChild(subredditItem);
关于javascript - 如何使用 Greasemonkey 编辑 Reddit 导航栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36128356/