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. js_style.jpg

    JavaScript

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

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

  2. canvas.jpg

    JavaScript

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

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

  3. offset_style_data.jpg

    JavaScript

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

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

  4. obj_clear.jpg

    JavaScript

    配列に入れた無名オブジェクトの値をクリアする

    オブジェクトの値を配列にいれて管理することってけっこうあります。…

  5. tweenmax_js_totation.jpg

    JavaScript

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

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

  6. 20120826222152

    JavaScript

    JavaScriptでテキストボックスから値を取得する

    テキストボックスに入力された値を取得します。Elementオブジ…

最近の記事

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

アーカイブ

  1. WordPress

    タイトルについて
  2. 日常

    写真の整理
  3. annular_eclipse1

    プロダクト

    5/21の金環日食に備えて『日食メガネ』を手に入れておこう
  4. App紹介ブックマークレット

    ブログツール

    App紹介の自動HTML作成Bookmarkletを実装
  5. LEGO社の再生に学ぶ!『日経ビジネス』1779号

    読書

    LEGO社の再生に学ぶ!『日経ビジネス』1779号
PAGE TOP