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

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

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

  2. JavaScript

    JavaScriptでコメントは「/* */」をなるべく使わないようにしたい

    コメントには囲った部分をすべてコメントにする「/* */」と、1…

  3. JavaScript

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

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

  4. JavaScript

    JavaScript内で、HTMLのIDを直接指定したらダメ

    Webアプリをデザインしていて、JavaScriptの記述について…

  5. JavaScript

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

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

  6. JavaScript

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

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

最近の記事

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

アーカイブ

  1. 日常

    「Charlie」 AND 「WAGAMAMA」
  2. 日常

    香港政府観光局
  3. ドラクエ展

    展覧会

    ドラゴンクエスト展 [誕生25周年記念]
  4. farmers market

    日常

    Farmer's Market @ UNU
  5. 日常

    プレゼン成功
PAGE TOP