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

    JavaScript

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

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

  2. QueryString.jpg

    JavaScript

    クエリーストリングを利用してWebページ間でデータを受け渡してみる

    「クエリーストリング」っていうのは以下のようなGoogleで検索し…

  3. scope.jpg

    JavaScript

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

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

  4. js_style.jpg

    JavaScript

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

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

  5. oncomplete_function.jpg

    JavaScript

    【TweenMax】「onComplete」で引数を使う方法

    TweenMaxの「onComplete」で引数を使いたい場合って…

  6. css_sprite.jpg

最近の記事

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

アーカイブ

  1. graphic_design_in_japan_2012_1

    展覧会

    日本らしいシンプル系が多数展示されていた「GRAPHIC DESIGN IN J…
  2. 日常

    2009年、ORIHICA福袋
  3. katagami_style01

    展覧会

    世界が恋した日本のデザインを観よう!『KATAGAMI Style展』の見どころ…
  4. 日常

    「ブルース・ウェーバー展」
  5. microSDカードが16GBで463円!? UMAXの「micro SDHC Card」

    ガジェット

    microSDカードが16GBで463円!? UMAXの「micro SDHC …
PAGE TOP