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. css_sprite.jpg
  2. parseInt.jpg

    JavaScript

    JavaScriptでローカルストレージを使うときに覚えておきたい文字列型から数値型への変換方法

    HTML5を使ったWebアプリをデザインしているときに必要だったの…

  3. tweenmax_js_totation.jpg

    JavaScript

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

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

  4. fb022d1ac056d555673c17937de7f431.png

    JavaScript

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

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

  5. offset_style_data.jpg

    JavaScript

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

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

  6. trycatch.jpg

    JavaScript

    JavaScriptでエラーが起っても固まらないように「try-catch」する

    HTML5とJavaScriptでこねこねしてWebアプリを作って…

最近の記事

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

アーカイブ

  1. FireKing_BEAMS_ALPHABETMUG-1.jpg

    テーブルウェア

    自分のイニシャルはどんなデザイン? ファイヤーキング × ビームスの「アルファベ…
  2. mac_cantopen.jpg

    Mac

    Macの「”ほげほげ”は、開発元が未確認のため開けません。」を解決する方法
  3. 【無印良品】オフィス用に羽織物「くつろぎケープ」を購入♪

    無印良品

    【無印良品】オフィス用に羽織物「くつろぎケープ」を購入♪
  4. ehon_100neko-1.jpg

    読書

    【絵本】大人ももう一度読みたい『100万回生きたねこ』
  5. image_duplicate_as_jpeg.jpg

    Mac

    Macでアプリを使わずpngを一気にjpgに変換する方法
PAGE TOP