質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

92.00%

  • JavaScript

    7957questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    2802questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

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

解決済

回答 7

投稿 2015/08/12 17:09

  • 評価
  • クリップ 2
  • VIEW 9,972

D.O

score 42

みなさんこんにちは

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

たとえば...

cssで

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

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

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

よろしくお願いします。


  • 気になる質問をクリップする

    クリップした質問に回答があった場合に通知・メールを受け取ることができます。

    クリップした質問はマイページの「クリップ」タブからいつでも見ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 7

+8

このあたりですかね?

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 17:22

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

+2

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            text-align: center;
        }
        #wrapper{
            width: 90%;
            padding: 0 5%;
            text-align: left;
        }
        .test {
            width: 50%;
            height: 100%;
            background: #fc3;
            font-size: 150%;
        }
        form {
            margin: 1%;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div class="test">
            TEST
        </div>
        <form id="_form" action="return false">
            <label>backgroundColor : <input type="text" name="_color"></label>
        </form>
        <button id="class_change" onclick="changeBG()">CHANGE</button>

        <script type="text/javascript">
            (function (document){
                var _form=document.getElementById("_form");
                var _flag=0;
                window.changeBG=function (){
                    var _style=document.getElementById("css_target") ||
             document.createElement("style");
                    _style.setAttribute("id","css_target");
                    _style.innerHTML=".test {"+
                    "background :"+_form._color.value+";"+
                    "}";
                    if(!_flag){
                        document.getElementsByTagName("body")[0].appendChild(_style);
                        _flag=1;
                    }
                }
            }(document));
        </script>
    </div>
</body>
</html>

投稿 2015/08/12 18:47

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2015/08/18 19:23

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

    キャンセル

+1

jQuerycssを使えば簡単です。
$('div').on('click',function () {
  $(this).css('width',400);
});
css(name, value)

投稿 2015/08/12 17:16

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2015/08/13 02:46

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

    キャンセル

+1

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

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

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

.wideWidthMode .hoge {
  width: 600px;
  height:300px;
}

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

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

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


追記。

jQueryの.css()メソッドを使えば、DOMに直接style属性が追加されるので、これより強いCSSが指定されていなれば表示を変えることはできます。簡単に。
$('.hoge').css()
ただし、
.hogeがページ内に沢山あると、処理のコストが高いので表示が遅くなったりする可能性があります。
さらにスタイルの変更時に.hoge内のタグのスタイルも変更したいような要望が出た時、さらにこの中を.find()して.css()をして〜となるので処理が多くなる上に、もとに戻す時また大変な処理をする事になります。
この辺りがデメリットになると思います。

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

投稿 2015/08/12 17:21

編集 2015/08/12 17:34

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2015/08/13 02:48

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

    キャンセル

+1

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

<style>
p {
  background-color: #fee;
  border: solid 1px #d99;
  font-weight: bold;
  padding: 0.5em;
}

.hoge {
  color: black; /* 改変箇所。質問文では width を改変していましたが、分かりやすいように color にしました。 */
}
</style>
</head>
<body>
<p class="hoge">sample</p>
<script>
function getCssRuleBySelectorText(selectorText /*[, document] */) {
  var doc = arguments.length > 1 ? arguments[1] : document,
      styleSheets = doc.styleSheets;

  for (var i = 0, l = styleSheets.length; i < l; ++i) {
    for (var j = 0, cssRules = styleSheets[i].cssRules, m = cssRules.length, cssRule; j < m; ++j) {
      cssRule = cssRules[j];

      if (cssRule.selectorText === selectorText){
        return cssRule;
      }
    }
  }

  return null;
}

var style = getCssRuleBySelectorText('.hoge').style;

console.log(style.color); // black
style.color = 'red';
console.log(style.color); // red
</script>


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

<style>
.sample { /* アコーディオン最上位要素 */ }
.hoge { /* アコーディオン開閉要素(default) */ }
.hidden { /* アコーディオン開閉要素を閉じる CSSRule */ }
</style>
</head>
<body>
<dl class="sample">
  <dt>A</dt>
  <dd class="hoge">Aの説明文</dt>
  <dt>B</dt>
  <dd class="hoge hidden">Bの説明文</dt>
  <dt>C</dt>
  <dd class="hoge hidden">Cの説明文</dt>
</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 23:14

編集 2015/08/19 14:25

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2015/08/18 15:50

    スタイルシートの定義変更とは話がずれてしまうのですが、
    > `class="hoge foo"`に変更して`.foo`に
    とした場合、上の回答でthink49さまがコメントされているように<p class="hoge"></p>を挿入した際に`hoge`のみのスタイルが当たってしまうようになる点に注意が必要になるかと思います。また、`.hoge`が多いと変更する処理が多くなってしまうかなとも思います。
    クラスへの意味のもたせ方のルールのお話になると宗教問題的になってくるのでコレは置いておいて、追加した<p class="hoge"></p>も既に他にある`.hoge`もスタイルを丸っと変更したいであれば、`.foo`は上の階層につけてやり、スタイルは`.foo .hoge`で定義してあげておくほうが確実かつ処理が楽なのではと思いますがいかがでしょうか?

    後、以下は既に解消されている問題なのかちょっと不勉強で申し訳ありませんが
    複数のclassをセレクタに指定`.hoge.foo {}`した際、IE6以下では正常に表示されなかったように記憶しております。まぁIE6対応なので、昨今ではほぼ関係ないかと思いますし、`.foo {}`だけで上書きしてしまえば済む話なのであまり関係のないコメントでスミマセン。

    キャンセル

  • 2015/08/19 14:41

    To: KiKiKi_KiKiさん
    class 属性書き換え推奨の説明が抽象的だったので、親記事に具体例を書き加えて大幅に編集しました。

    > <p class="hoge"></p>を挿入した際に`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 が <p class="hoge foo"> を意図して表現している場合があって分かりづらかったと反省しています。
    個人的には CSS で multiple class はあまり使わず、HTML 上で class 複数指定でカスケード処理する実装が多いですね。

    キャンセル

0

こういうことですか?
jQuery利用
$(".hoge").css({"width":"400px"});

投稿 2015/08/12 17:14

編集 2015/08/12 17:15

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2015/08/13 02:45

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

    キャンセル

checkベストアンサー

-3

例えば、

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

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

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

投稿 2015/08/12 17:13

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2015/08/13 07:45

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

    キャンセル

  • 2015/08/17 18:20

    think49様
    ご指摘ありがとうございます。
    ココにはベストアンサーを戻す方法がないのでしょうがないですが、
    短絡的に回答してしまってベストアンサーに選ばれてしまってます。。。
    ご指摘の通り追加タグには、適応されません。
    しかし、質問者様が解決できたようで何よりです。

    think49様はとてもお詳しいようなので、
    是非とも正攻法で特定のクラス定義のwidthを変更するコードを拝見したくございます。
    ココの質問は解決済みですが回答ができるので、
    お手隙の際にご回答いただけると幸いです。

    キャンセル

  • 2015/08/17 23:16

    回答しました。

    キャンセル

  • 2015/08/18 14:02

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

    キャンセル

  • 2015/08/19 14:42

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

    キャンセル

  • 2015/08/19 17:36

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

92.00%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    7957questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    2802questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

閲覧数の多いJavaScriptの質問