Question

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

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”技巧一样。

Answer 1

CSS Selector

使用选择器表示法按其属性

查找节点

[title="element title attribute value"]

使用 JavaScript

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

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

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

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

将 JavaScript 转换为书签，就像

一样简单

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

Here is a fiddle您可以在其中粘贴代码

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

1 个答案: