安易にページのスタイルを変更する【JavaScript】【CSS】

タイトルの通り、何も考えず、今見ているページにCSSを適用したいってときに、bodyにstyleタグを放り込んでしまうことがあります。

そういうケースは、普段ネットサーフィンしていて見付けたサイトでっていうのが多いので、生のJSで書きます。

そうすると、DOM要素の生成が面倒だったりするので、なんとなく関数化してみました。

あまりにも"安易"な方法なので、お仕事以外のプライベートのときしか使いませんが…

/**
 * body直下にstyleタグを追加して、安易にページのスタイルを変更する
 * @param cssStr  追加するcss文字列
 * @return elm    追加されたstyle要素
 */
function addStyle(cssStr) {
    var elm = document.createElement('style');
    elm.innerText=cssStr;
    document.body.appendChild(elm);
    return elm;
}

使い方は、F12ツールのコンソールを開いて、上記関数貼ってEnter。

後は目的のCSSを以下の感じで挿入。

addStyle('iframe[name^="hoge_hoge"] { display: none; }');

問題は、この関数を毎回コピーしてくる手間が発生することですね。 IMEの辞書にでも登録しておこうかな(笑)