Warning: Parameter 1 to multibyte_patch::wplink_js() expected to be a reference, value given in /home/voidgraphics/www/crunchlog/wp-includes/plugin.php on line 579

Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/voidgraphics/www/crunchlog/wp-includes/plugin.php on line 579
背景画像をJavaScriptで入れ替える2種類の方法 | Crunchlog
Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/voidgraphics/www/crunchlog/wp-includes/plugin.php on line 579

JavaScript

背景画像をJavaScriptで入れ替える2種類の方法

style_backgroundImage ものごとには「正解」というものがひとつではない、ってことが多いもんです。 プログラミングでもそれは同じ。 オブジェクトの背景画像を入れ替える方法も複数あります。 jQueryを使ったやり方は簡単で可読性もいいのですが、 実行速度が少し遅いんですよね。 Webアプリをデザインしていると その遅さが気になってくるところがあります。 例えばボタンの動作が一瞬おくれるとか。。。 速度を気にするのなら jQueryは使わないほうがいいですよ。
1
2
3
4
5
6
7
8
//jQueryを使った書き方
$('#hoge').css("background-image","url('/img/hoge.png')");
 
//jQueryを使わない速度重視の書き方
//DOM取得 
var objID = document.getElementById('hoge');
//リンクを設定    
objID.style.backgroundImage = "url(img/hoge.png)";
ちなみに DOMの取得は関数の一番最初のほうでやっておくのがいいです。 DOM取得のやり方は、 背景画像を変えるときだけではなくCSSとか全般の話ですよ♪ ▼jQueryって便利ですからね〜、うまく適材適所ということで。

関連記事

  1. canvas.jpg

    JavaScript

    WebアプリでCanvasを使うための指定方法

    Webアプリをデザインするときのお決まりになりつつあるHTML5の…

  2. offset_style_data.jpg

    JavaScript

    「offset」と「style」で取得する値が違う

    ちょっとはまったのでメモ。以下のように「offset」と「sty…

  3. css_sprite.jpg
  4. tweenmax_js_oncomplete.jpg

    JavaScript

    【TweenMax.js】アニメーション終わりに関数を呼び出す!

    最近はWebアプリでアニメーションが必要になったときに、「Twen…

  5. js_style.jpg

    JavaScript

    CSSのプロパティをJavaScriptで指定する

    Elementオブジェクトのstyleプロパティでその要素に対し…

  6. 20120716134815

    JavaScript

    正規表現で入力されたテキストが有効かをチェックする

    テキストボックスに入力されたテキストが整数かどうかをチェックします…

最近の記事

  1. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  2. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  3. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  4. 【コレクション】カードダス:SDガンダム外伝シリーズ
  5. 懐かしい!!カードダスSD戦国伝!!
  6. 【無印良品】作り置きに欠かせない!バルブ付き密閉保存容器
  7. 【UNIQLO】冬のジム通いにブロックテックフリースパーカをお得に購入!!
  8. 【UNIQLO】冬のジム通いにブロックテックフリースパンツをお得に購入!!
  9. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  10. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」

アーカイブ

  1. 日常

    Manchester
  2. 日常

    陽気
  3. 日常

    『視覚世界の謎に迫る』
  4. AKATSUKI HAYABUSA

    イベント

    第30回 宇宙科学講演と映画の会
  5. annular_eclipse

    日常

    金環日食と金環日食デザイン・プロダクト
PAGE TOP