日記

日本語の勉強のためのブログ

クリック済のリンクの色を変えたい

2024-03-06追記

uBlockOriginで色を変える方法がわかったので別の記事に書いた。

everykalax.hateblo.jp


デフォルトではクリック済のリンクの色が見づらい場合があるので変えたい。

リンクの色をCSSで指定する

クリック済のリンクのスタイルについては、CSSa:visited要素を指定してやれば変更できるらしい。*1

CSSルールをJSで取得・追加

javascript側でCSSルールを得るにはdocument.styleSheetsを用いる。*2
配列が返されるのでdocument.styleSheets[0]のようにすれば各要素が参照できる。
これにルールを追加するにはinsertRule()関数を使う。引数として、追加するCSSルールを文字列で与えればよい*3
なおaddRule()という関数もあるようだが、こちらはすでに非推奨(Deprecated)となっている*4

できた

色は適当に好みで決めた。#aaaaaaを変更すれば変えられる。

js

document.styleSheets[0].insertRule("a:visited { color: #aaaaaa; }");

ブックマークレット

javascript:(function(){document.styleSheets[0].insertRule("a:visited { color: #aaaaaa; }");})();