ベンダプレフィックスつき擬似クラスのスタイルをjsで動的に設定する

技術系日記 javascript

ライブラリをせこせこ作っているときにplaceholderの色を変更したいという要望がでてきた。

このときCSSとしての指定は以下のようになる。(参考にあげた記事から引用)

// Google Chrome, Safari, Opera 15+, Android, iOS
::-webkit-input-placeholder {
    color: red; }

// Firefox 18-
:-moz-placeholder {
    color: red; opacity: 1; }

// Firefox 19+
::-moz-placeholder {
    color: red; opacity: 1; }

// IE 10+
:-ms-input-placeholder {
    color: red; }

jQureryUI widgetを使っているので設定は引数にObjectを指定する形式にしたい。

サンプル用に適当なwidgetとしてreplicaを作ることにする。

$('#input').replica({
  placeholderColor: 'red' // こんな感じでCSSの値を指定するようにする
});

で、ここで気づくのはjavascript側から::-webkit-input-placeholderという「セレクタ」が扱えないということ。
普段扱うのはcolor: red;の「プロパティ名」と「値」だけど。
今回扱うのはinputや#targetという要素を指定するセレクタだ、ということでIE11でdocument.querySelectorにひっかけても駄目。
(というかそもそも擬似クラスでDOMじゃないからな……)

仕方ないので<style>タグを生成しておくことにする。

$(this.target).before(function() { // thisはwidget定義したときのアレ
  var $style = $('<style>')
  $style.attr('id', 'jquery-ui-replica-style')
        .text('#' + this.target.id + '::-webkit-input-placeholder { color: ' + this.opts.placeholderColor + '; }');
  return $style;
}.bind(this));

ちなみに思い出しながら書いたので全然動かないかもしれません。
なのでQiitaじゃなくてはてなに投稿して終わります。

thisの使い方とかが完全にjQueryUI用ですけどやってることは<style>の生成なので別環境でも使えます。

参考