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. css_sprite.jpg
  2. tweenmax_js_oncomplete.jpg

    JavaScript

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

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

  3. js_style.jpg

    JavaScript

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

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

  4. trycatch.jpg

    JavaScript

    JavaScriptでエラーが起っても固まらないように「try-catch」する

    HTML5とJavaScriptでこねこねしてWebアプリを作って…

  5. tweenmax_js_totation.jpg

    JavaScript

    【TweenMax.js】回転アニメーションも楽々!

    以前も記事に書いたアニメーション用のJavaScriptライブラリ…

  6. scope.jpg

    JavaScript

    JavaScriptでは「変数のスコープ」を正しく理解してエラーを減らそう!

    変数の「スコープ」は正しく理解しないと、エラーにならないエラーが起…

最近の記事

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

アーカイブ

  1. 日常

    編集はつづく
  2. bodaiju_expo-1.jpg

    展覧会

    1つのホテルの100部屋に100名のアーティスト!?「BODAIJU EXPO」…
  3. 日常

    風邪が・・・。
  4. 夢コラボ「スター・ウォーズ × ビックリマン」!

    コレクション

    夢コラボ「スター・ウォーズ × ビックリマン」!
  5. 日常

    寂菖蒲
PAGE TOP