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

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

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

  2. JavaScript

    WebアプリのデバッグをChromeでやるために「touch events」を有効化する方法

    Webアプリのデバッグは「Chrome」をいつも使ってます。その…

  3. JavaScript

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

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

  4. JavaScript

    「TweenMax.js」をビジネス利用のためのライセンス購入方法

    いつもJavaScriptのアニメーション部分でお世話になってる「…

  5. JavaScript

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

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

最近の記事

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

アーカイブ

  1. 展覧会

    グッドデザインばかりが集められた「GOOD DESIGN EXHIBITION …
  2. 夏にリピートしたい! おしゃれアイスバー「PALETAS」にいってみた♪ 

    グルメ

    夏にリピートしたい! おしゃれアイスバー「PALETAS」にいってみた♪ 
  3. JavaScript

    【TweenMax】「onComplete」で引数を使う方法
  4. 日常

    原研哉×ナガオカケンメイ トークイベント
  5. 日常

    カタチ
PAGE TOP