JavaScriptでCSSのクラス定義を書き換えるには？

みなさんこんにちは

JavaScriptからCSSのクラスの定義を書き換えるにはどうしたら良いでしょうか？
要素のに割り当てるクラスを変えるということではなく、クラスで定義している値を書き換えるとうことです。

たとえば．．．

cssで

.hoge {
width:300px;
height:150px;
}

でhogeクラスのwidthを400pxに変更すようなことです。

調べようとしたのですが．．．要素のクラス名を変えるとか、クラスを追加、削除する方法は見つかるのですがクラスの定義そのものを書き換えるパターンの情報は見つけられませんでした。
jQuery使うのも有りです。

よろしくお願いします。

行動規範の内容に同意します

回答7件

このあたりですかね？

http://wiki.bit-hive.com/tomizoo/pg/Javascript%20cssRules

キーワードとしてはCSSRuleあたりですね。

こんな感じで定義にアクセスできます。

document.styleSheets[0].cssRules[0].style.backgroundColor = 'blue';

ただ、定義自体を書き換えるケースってあまりないと思っていて、設計自体を見なおしたほうがいいかもしれません。
例えば複数クラスを付与して意味を拡充してく、という方法も考えられます。

.hoge {
  background-color: red;
}

.hoge.isFuga {
  background-color: blue;
}

みたいな感じです。

投稿2015/08/12 08:22

edom18

総合スコア2283

CSSRule を書き換えるという質問者さんの要件は下記コードで満たせます。
http://jsfiddle.net/zv5LLd73/1/ にサンプルコードをUPしました。
(※IE8- には cssRules がない為、rules で参照する必要がありますが、IE8- は未検証です)

HTML
1<style>
2p {
3  background-color: #fee;
4  border: solid 1px #d99;
5  font-weight: bold;
6  padding: 0.5em;
7}
8
9.hoge {
10  color: black; /* 改変箇所。質問文では width を改変していましたが、分かりやすいように color にしました。 */
11}
12</style>
13</head>
14<body>
15<p class="hoge">sample</p>
16<script>
17function getCssRuleBySelectorText(selectorText /*[, document] */) {
18  var doc = arguments.length > 1 ? arguments[1] : document,
19      styleSheets = doc.styleSheets;
20
21  for (var i = 0, l = styleSheets.length; i < l; ++i) {
22    for (var j = 0, cssRules = styleSheets[i].cssRules, m = cssRules.length, cssRule; j < m; ++j) {
23      cssRule = cssRules[j];
24
25      if (cssRule.selectorText === selectorText){
26        return cssRule;
27      }
28    }
29  }
30
31  return null;
32}
33
34var style = getCssRuleBySelectorText('.hoge').style;
35
36console.log(style.color); // black
37style.color = 'red';
38console.log(style.color); // red
39</script>

ただし、文脈によっては class の付け外しで制御した場合もあります。
よくあるアコーディオンメニューのスクリプトを例にとります。

HTML
1<style>
2.sample { /* アコーディオン最上位要素 */ }
3.hoge { /* アコーディオン開閉要素(default) */ }
4.hidden { /* アコーディオン開閉要素を閉じる CSSRule */ }
5</style>
6</head>
7<body>
8<dl class="sample">
9  <dt>A</dt>
10  <dd class="hoge">Aの説明文</dt>
11  <dt>B</dt>
12  <dd class="hoge hidden">Bの説明文</dt>
13  <dt>C</dt>
14  <dd class="hoge hidden">Cの説明文</dt>
15</dl>

dd要素がアコーディオンで開閉する要素であり、.hidden で閉じた要素、.hidden が存在しないのが開いた要素です。
.hidden を付与する事で閉じた事が分かるようにする効果があります。
(説明が複雑になるので省略しますが、WAI-ARIA の aria-hidden 属性を使うべきかもしれません)

もし、このアコーディオンで全てのdd要素を閉じる為に .hoge の CSSRule を書き換える実装にした場合、後で対象のdd要素が閉じているか、開いているか、を判断するためにdd要素ノードの getComputedStyle を確認するか、.hoge の CSSRule を参照しなくてはなりません。
CSSRule を辿るなら .hoge だけでは十分ではない場合もあり、.sample>.hoge や dd.hoge 等の対象要素に適用される全ての CSSRule を参照する状況も考えられます。

質問の背景が不明なので確かな事はいえませんが、「論理的な意味付けなしに .hoge の CSSRule が書き換わる状況」が私には想定できませんでした。
論理的な意味付けなしに CSSRule が書き換わるとすれば、それは CSS でやるべき実装にも思えます。
「外部CSSを編集できる権限がなくて JavaScript で CSSRule を書き換える」というケースであれば納得できますが、ちょっとイレギュラーすぎかもしれませんね。

P.S.
解決済みのようですが、NIA さんからリクエストを頂いたので回答しています。

(2015/08/19 14:25追記) class 属性書き換え推奨の説明が抽象的だったので具体例を書き加えて大幅に編集しました。

投稿2015/08/17 14:14

編集2015/08/19 05:25

think49

総合スコア18164

KiKiKi_KiKi

2015/08/18 06:50

スタイルシートの定義変更とは話がずれてしまうのですが、 > `class="hoge foo"`に変更して`.foo`にとした場合、上の回答でthink49さまがコメントされているようにを挿入した際に`hoge`のみのスタイルが当たってしまうようになる点に注意が必要になるかと思います。また、`.hoge`が多いと変更する処理が多くなってしまうかなとも思います。クラスへの意味のもたせ方のルールのお話になると宗教問題的になってくるのでコレは置いておいて、追加したも既に他にある`.hoge`もスタイルを丸っと変更したいであれば、`.foo`は上の階層につけてやり、スタイルは`.foo .hoge`で定義してあげておくほうが確実かつ処理が楽なのではと思いますがいかがでしょうか？後、以下は既に解消されている問題なのかちょっと不勉強で申し訳ありませんが複数のclassをセレクタに指定`.hoge.foo {}`した際、IE6以下では正常に表示されなかったように記憶しております。まぁIE6対応なので、昨今ではほぼ関係ないかと思いますし、`.foo {}`だけで上書きしてしまえば済む話なのであまり関係のないコメントでスミマセン。

think49

2015/08/19 05:41

To: KiKiKi_KiKiさん class 属性書き換え推奨の説明が抽象的だったので、親記事に具体例を書き加えて大幅に編集しました。 > を挿入した際に`hoge`のみのスタイルが当たってしまうようになる点に注意が必要仰る通りですが、ほとんどの場合は文脈上の変化があるので class="hoge" から class="hoge foo" に状態が変化した事を明示しておくのが望ましいと思うのです。ですので、「論理構造に変更があるスタイルシート書き換えであるならば」の限定付きで class="hoge foo" を推奨したのですが、分かりづらかったようですみません。論理構造(HTML)、視覚効果(CSS)、振る舞い(JavaScript)の役割分担を意識しています。新しく要素ノードを appendChild するのであれば、.hoge を挿入するのか、.hoge.foo を挿入するのか、を処理上で判断すれば良いと思います。「文脈上の変化がない場合」は .hoge の CSSRule を書き換えるのが最善ですが、その場合は CSS の役割だと思うので、JavaScript で CSS を代替しているような違和感があります。 > .hoge.foo {}`した際、IE6以下では正常に表示されなかった .hoge.foo は IE6 未対応ですが、IE6 は MS のサポート期間が過ぎているので今ではサポートしなくていい考えを持っています。ただ、親記事の説明上では .hoge.foo が を意図して表現している場合があって分かりづらかったと反省しています。個人的には CSS で multiple class はあまり使わず、HTML 上で class 複数指定でカスケード処理する実装が多いですね。

行動規範の内容に同意します

ものすごく荒く書きましたが機能は実現していますし、理屈も分かりやすいかと。
styleタグを生成してその中でclass定義を上書きしています。
その際書き出したstyleタグにidを振っておき、次回以降はその上書きを行っています。
……正直色々な意味で微妙な気がしますが。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<title>Document</title>
6	<style>
7		body {
8			text-align: center;
9		}
10		#wrapper{
11			width: 90%;
12			padding: 0 5%;
13			text-align: left;
14		}
15		.test {
16			width: 50%;
17			height: 100%;
18			background: #fc3;
19			font-size: 150%;
20		}
21		form {
22			margin: 1%;
23		}
24	</style>
25</head>
26<body>
27	<div id="wrapper">
28		<div class="test">
29			TEST
30		</div>
31		<form id="_form" action="return false">
32			<label>backgroundColor : <input type="text" name="_color"></label>
33		</form>
34		<button id="class_change" onclick="changeBG()">CHANGE</button>
35
36		<script type="text/javascript">
37			(function (document){
38				var _form=document.getElementById("_form");
39				var _flag=0;
40				window.changeBG=function (){
41					var _style=document.getElementById("css_target") ||
42             document.createElement("style");
43					_style.setAttribute("id","css_target");
44					_style.innerHTML=".test {"+
45					"background :"+_form._color.value+";"+
46					"}";
47					if(!_flag){
48						document.getElementsByTagName("body")[0].appendChild(_style);
49						_flag=1;
50					}
51				}
52			}(document));
53		</script>
54	</div>
55</body>
56</html>

投稿2015/08/12 09:47

Cf_cwd

総合スコア730

Cf_cwd

2015/08/18 10:23

ちなみに正攻法はedo_m18様の回答だと思います

行動規範の内容に同意します

javascriptでstyleタグを生成してhtmlに追加するなんて方法も考えられますが、コストが高いので
例えばbodyタグとかに、定義を切り替える場合の時のクラス名を決めておいて、
javascriptでbodyタグにそのクラス名を取る/付けるで対応するのが定義を増やしたいような要件が出てきても対応が楽だと思いますよ。

css
1.hoge {
2  width:300px;
3  height:150px;
4}
5
6.minWidthMode .hoge {
7  width: 150px;
8  height:150px;
9}
10
11.wideWidthMode .hoge {
12  width: 600px;
13  height:300px;
14}

bodyタグとか、予めスタイルを変更するためのラッパーを決めておいて、そのタグにjavascriptで、幅が狭い表示にするならminWidthModeクラスを付ける。幅が広い表示にするならminWidthModeを取ってwideWidthModeクラスを付ける。みたいな感じです。

LESSやSCSSやStylusを使っているなら、これらの定義を切り替えるクラス名でネストして、色々なスタイルの定義の変更を書けるので、コードの見通しも良くなると思いますがいかがでしょうか。

下記は一応javascriptでCSSを生成する参考のリンクです。大変なので個人的にあまりオススメはしないです。
JavaScriptでstyleタグをheadに挿入

追記。

jQueryの.css()メソッドを使えば、DOMに直接style属性が追加されるので、これより強いCSSが指定されていなれば表示を変えることはできます。簡単に。

javascript
1$('.hoge').css()

ただし、
.hogeがページ内に沢山あると、処理のコストが高いので表示が遅くなったりする可能性があります。
さらにスタイルの変更時に.hoge内のタグのスタイルも変更したいような要望が出た時、さらにこの中を.find()して.css()をして〜となるので処理が多くなる上に、もとに戻す時また大変な処理をする事になります。
この辺りがデメリットになると思います。

この方法は直接styleタグが作られるので、CSSの定義を変更と言うよりは上書きするに近いと思います。
個人的に.css()で直接styleタグを与えるような処理は極力一時的な変更に留めるような設計にした方がメンテナンスのコスト的にも良いと考えております。

投稿2015/08/12 08:21

編集2015/08/12 08:34

KiKiKi_KiKi

総合スコア596

D.O

2015/08/12 17:48

詳しい説明ありがとうございます設計の方も見直してみたいと思います。

行動規範の内容に同意します

jQueryのcssを使えば簡単です。

lang
1$('div').on('click',function () {
2  $(this).css('width',400);
3});

css(name, value)

投稿2015/08/12 08:16

sho_cs

総合スコア3541

D.O

2015/08/12 17:46

コメントありがとうございますこんなに簡単なんですね

行動規範の内容に同意します

こういうことですか?
jQuery利用

javascript
1$(".hoge").css({"width":"400px"});

投稿2015/08/12 08:14

編集2015/08/12 08:15

orange0190

総合スコア1698

D.O

2015/08/12 17:45

簡単ですね！失礼しました

行動規範の内容に同意します

ベストアンサー

例えば、

Javascript
1$('.hoge').css("width","400px");

Javascript
1$('.hoge').attr("width","400px");

なんていうのはどうでしょう？

投稿2015/08/12 08:13

NIA

総合スコア181

think49

2015/08/12 22:45

カスケード規則によってスタイルが上書きされるのでスタイル上書きは期待通りに動作しますが、この方法ではクラス定義は書き換わっていないのではないでしょうか。このコードを適用後、 をdocumentに挿入しても width:400px は適用されないと思います。他の皆さんの仰るように document.styleSheets を書き換えるのが正攻法であると思います。

NIA

2015/08/17 09:20

think49様ご指摘ありがとうございます。ココにはベストアンサーを戻す方法がないのでしょうがないですが、短絡的に回答してしまってベストアンサーに選ばれてしまってます。。。ご指摘の通り追加タグには、適応されません。しかし、質問者様が解決できたようで何よりです。 think49様はとてもお詳しいようなので、是非とも正攻法で特定のクラス定義のwidthを変更するコードを拝見したくございます。ココの質問は解決済みですが回答ができるので、お手隙の際にご回答いただけると幸いです。

think49

2015/08/17 14:16

回答しました。

NIA

2015/08/18 05:02

ご回答ありがとうございます。感謝いたします。

think49

2015/08/19 05:42

KiKiKi_KiKiさんの指摘を受けて記事を大幅に修正したので、よろしければ参考にして下さい。

NIA

2015/08/19 08:36

大変参考になりました。確かにイレギュラーなケースかもしれませんが、より分かりやすくなり多くの人が共有できるなったと思います。