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. 20120716134815

    JavaScript

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

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

  2. tweenmax_js_totation.jpg

    JavaScript

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

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

  3. QueryString.jpg

    JavaScript

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

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

  4. js_style.jpg

    JavaScript

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

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

  5. scope.jpg

    JavaScript

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

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

  6. offset_style_data.jpg

    JavaScript

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

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

最近の記事

  1. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  2. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  3. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  4. コミックのイラストが新鮮だった!『MARVEL展』
  5. ジム用に購入♪ リバーサル・オッシュマンズ別注「ドライスウェットショーツ」
  6. 暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」
  7. 水引と風呂敷の包み方のデザインが美しい引き出物「祝づつみ」
  8. 【無印良品】ちょっと小さいクリップも買っておいて損はない「袋止めクリップ・小」
  9. 【無印良品】普通に使えるクリップが安くてうれしい「袋止めクリップ・大」
  10. 今年の手帳はコレに決めた♪「ほぼ日手帳 2017 オリジナル」

アーカイブ

  1. 日常

    デビュー!?
  2. 日常

    陽気
  3. 日常

    気晴らしゲーム
  4. 日常

    露天風呂とマージャン
  5. 日常

    おわった感
PAGE TOP