使用JavaScript按标题选择元素并从浏览器调整？

Posted 2021-04-13

我需要按标题修改元素，如

javascript: (function () {
  document.body.innerhtml += `<style>* {
    background:% 20#000 % 20!important;
    color:% 20#0f0 % 20!important;
    outline:% 20solid % 20#f00 % 201px % 20!important;
  } </style > `;
})();

所以我想修改那些代码，这样当我运行它时（我将它放在书签栏上的按钮中以便于访问）它会改变文档上某个元素的位置。

我可以选择这个元素的唯一方法是使用title属性，所以我需要找到一种方法，用javascript按标题选择元素，然后对其样式应用更改，就像“Ghost CSS”技巧一样。

答案

CSS Selector

使用选择器表示法按其属性查找节点

[title="element title attribute value"]

---

使用JavaScript

与CSS中的选择器相同，但您可以使用document.querySelector获取节点，或者如果需要多个节点，则可以通过document.querySelectorAll获取NodeList

var node = document.querySelector('[title="element title attribute value"]');

---

当您执行.innerHTML时，您正在重新解析您调用它的节点中的所有HTML，这可能会破坏网页的各个部分。您应该使用DOM方法来创建节点。例如

var style = document.createElement('style');
style.appendChild(document.createTextNode('div {border: 1px solid red}'));
document.body.appendChild(style);

---

将JavaScript转换为bookmarklet非常简单

bookmarklet = 'javascript:'
    + encodeURIComponent('(function () {' + code + '}())')
    + ';';

Here is a fiddle，您只需粘贴代码即可