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

Question

我正在制作这个小脚本在我的浏览器上运行,因为我有几个破解的Wordpress插件,使用它们的唯一方法就是从浏览器中调整它们的属性,就像我在某个地方找到的这个巧妙的技巧但我不能找到来源:

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

请原谅我没有提供链接,但我真的找不到它,已经花了30分钟在谷歌上搜索它.

所以我想修改那些代码,这样当我运行它时(我在书签栏上的按钮中可以更方便地访问它)它会调整网站上某个元素的位置.

我可以选择这个元素的唯一方法就是它的"title"属性,所以我需要找到一种方法来通过javascript选择一个元素,然后对它的样式进行更改,就像那个小"Ghost CSS"技巧一样.

我真的希望这有效,否则我将不得不打开firebug/inspector并手动查看数百个HTML标签,并在每次必须进行更改时找到属性,这需要花费太多时间,因为我必须更改很多文章.这个小技巧实际上可以拯救我的生命和工作.

我认为它也可以用Greasemonkey完成,但我从未使用它,所以我真的不知道.

任何想法/提示也不胜感激.

Answer 1

CSS选择器

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

[title="element title attribute value"]

使用JavaScript

相同的选择,如CSS,但你可以得到的节点使用document.querySelector,或者如果期望多个节点,一个节点列表通过document.querySelectorAll

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 + '}())')
    + ';';

这是一个小提琴,您只需粘贴代码即可