表示しているテキストを使ってstyleを追加してみるデモを振り返る

2011/02/03

カテゴリ：: JavaScript

タグ：: jquery; javascript; Replace

先日のエントリー『CSS3のtransitionプロパティでアニメーションを試してみた』で、何気なく作ってみた、ブラウザごとでプレフィックスを変更するボタン。単純に文字の置換で実行されているのですが、その時作ったものを振り返ってみようと思います。

JavaScriptのコード

いつものことながら、DOMの操作が楽になるのでjQueryも使ってコードを書いています。

jQuery(function($){
  $('button').click(function(){
    $("style#pasteStyle").remove();
    var selfText = $(this).text(); 
    var elm = $('#pre01>code');
    var text = elm.text();
    var prefix = text.replace(/-(○○|webkit|o|moz)-/g,selfText);
    $('<style></style>',{id:'pasteStyle'}).text(prefix).appendTo('head');
    elm.text(prefix);
  });
});

これだけです。といっても、実は全然いいコードじゃないのは見逃してください。とりあえずそのエントリーだけでも動作したらいいやーという気分で作ったものです。

コードを細かく振り返る前に、この時の仕様を書きだしてみます。

おおまかな仕様

予めボタンにプレフィックスのテキストを仕込んておく
クリックされたらまずは追加スタイルをリセット
クリックしたボタンのテキストを変数にセット
表示しているCSSのテキストを取得
取得したテキストからプレフィックス部分を抜き出し、ボタンのテキストで置換
style要素を新たに作成し、置換後のテキストを入れ、head内の最後に追加
表示部分のテキストも差し替え

あくまでプレビュー用なので、表示しているテキストがベースとなってstyleの追加が行われる仕様です。この表示されているテキストがないケースの場合は、予め特定のstyle用をHTML側でセットしておき、それを取得して変換という仕様にする必要があります。

先日のデモプレビューをもう一度

先日の『CSS3のtransitionプロパティでアニメーションを試してみた』で実際に動作させていたデモです。

.demo div{
-○○-transition-property:background-color,width,height;
-○○-transition-duration: 1s;
-○○-transition-timing-function: ease;
-○○-transition-delay: 0s;
}

このブロックにマウスをのせてね（:hoverで下の四角が伸びます）

それぞれお使いブラウザと同じプレフィックスのボタンを押したら、ブロックにマウスをのせた際にアニメーションして変化するというデモでした。

置換部分

var prefix = text.replace(/-(○○|webkit|o|moz)-/g,selfText);

まぁ、そういう指定で検索置換するなら、「-」ハイフン部分は不要なんじゃ・・・と振り返って思ったり。

Styleタグ追加部分

$('<style></style>',{id:'pasteStyle'}).text(prefix).appendTo('head');

$('<style></style>',{id:'pasteStyle'})の部分で、pasteStyleというIDをもったstyleタグを作ります。styleタグにidアリなのかよというのは置いといて、IDを付けておけば削除の際に楽に該当の追加したStyle部分だけを削除したりすることが可能です。もちろんIDは付いていなくてもOKで、head内の最後のstyle要素とかでも取ってこれたりします。ただ、毎回付けたりとったりしているなら、IDで拾ってくるのでもいいのかと思い、とりあえずID付加。

その後、そのstyle要素内に、置換後のテキストを.text(prefix)でいれて、.appendTo('head')でhead内の最後に挿入します。

そしてここでも今更ですが、.text()を使わずとも、$('<style></style>',{id:'pasteStyle,text:prefix'})としていてもよかったなーと気づいたり…