JavaScript

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

js_style

Elementオブジェクトのstyleプロパティで
その要素に対して個別にCSSスタイルを設定できます。

普段はjQueryでやってるので
JavaScriptでどうやるんだろうとは思ってました。

jQueryのほうが直感的に指定できて、
コードの可読性もあるんですが、
動作が遅いんですよね、jQueryって^^;

だから
すばやくCSSを切り替える必要があるときに使います。

とくにWebアプリとかで、ゲームなんかつくってたりすると
使う必要はあるでしょうね。

1
2
var elem = document.getElementsByName('hoge');
elem.style.background = 'red';

ただし、注意することがあります。
どうやらIDやクラスを利用したCSSスタイル設定よりも
優先されるみたいなんです。
気をつけないとガタガタ崩れちゃいそうですね。

▼基本がわかります

関連記事

  1. JavaScript

    Android端末のデフォルト・ブラウザでJavaScriptのデバッグをする方法

    Webアプリをデザインするときに必須となるのがJavaScript…

  2. JavaScript

    JavaScriptでグローバル変数を減らす方法

    グローバル変数はいいことない!もしかしたら使っているライブラリー…

  3. JavaScript

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

    ものごとには「正解」というものがひとつではない、ってことが多いもん…

  4. JavaScript

    強力なアニメーション用のJavaScriptライブラリー「TweenMax.js」が便利!

    jQueryでもアニメーションはできるのですが、それよりも表現力豊…

  5. JavaScript

    「offset」で取得した値を使い回す

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

最近の記事

  1. ホワイトハウスコックスの財布
  2. 進撃の巨人展FINAL チラシ
  3. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  4. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  5. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  6. 【コレクション】カードダス:SDガンダム外伝シリーズ
  7. 懐かしい!!カードダスSD戦国伝!!

アーカイブ

  1. デザインも機能も欲しい欲張りな折れない傘!「Senz Umbrella mini」

    プロダクト

    デザインも機能も欲しい欲張りな折れない傘!「Senz Umbrella mini…
  2. JavaScript

    WebアプリのデバッグをChromeでやるために「touch events」を有…
  3. 【UNIQLO】レゴTの中でもお気に入りのデザイン! ひよこ&にわとり♪

    ファッション

    【UNIQLO】レゴTの中でもお気に入りのデザイン! ひよこ&にわとり
  4. 日常

    『デザイン・ルールズ』
  5. 湘南台文化センター

    展覧会

    「はやぶさ」帰還カプセル展示閲覧!
PAGE TOP