- ベストアンサー
CSSを無効に出来ますでしょうか？
よろしくお願いします。 サイト内で、ある一部のページのみにCSSをON/OFFに切り替えれる ボタン？を設置しようとしているのですが、色々とサンプルなどを 探して設置してみるのですがうまくいきません・・・。 CSSの定義自体、何か特殊な方法で切り替える場合には指定を 行わないといけませんでしょうか？ どなたか、これを実現できる方いらっしゃいましたら アドバイスいただけると助かります。 よろしくお願いいたします。
- yuyukina
- お礼率66% (251/380)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
一応３行でそのまま動く物でしたが、イメージが掴みにくかったようですね。具体的な目的が分からなかったので、プルダウンの選択ごとにCSSを切り替えるサンプルにしてみました。 以下の例では、プルダウンを選択するたびに、同じフォルダーの中の「a.css」「b.css」が交互に読み込まれます。 ---- <html> <head> <link rel="stylesheet" type="text/css" href="a.css"> <script type="text/javascript"> function changecss(val){ var csssource = val + ".css"; var linklist = document.getElementsByTagName("link"); linklist[0].href = csssource; } </script> </head> <body> <select name="housing_type_def" onchange="changecss(this.value)"> <option value="a">cssa</option> <option value="b">cssb</option> </select> </body> </html>
その他の回答 (2)
- steel_gray
- ベストアンサー率66% (1052/1578)
CSSはdocument.styleSheetsに格納されてます。（link,head内の記述共に） これらのdisabledを切り替える事で簡単にon/offできます。 （ただし、style属性で書かれたスタイルはこれでは切り替えできません） 以下、サンプルです。 (style構文が一つなので手抜きでdocument.styleSheets[0]を直接参照しているが、複数ある場合はforで回す、とかしないと。) <html> <head> <title></title> <style type="text/css"> body{background-color:black;color:white;} h1{font:normal bold medium serif;} </style> <script type="text/javascript"> function sample(obj){ if(obj.value.match(/off/)){ obj.value = obj.value.replace(/off/,'on'); document.styleSheets[0].disabled = true; } else { obj.value = obj.value.replace(/on/,'off'); document.styleSheets[0].disabled = false; } } </script> </head> <body> <h1>サンプル</h1> <p><input type="button" value="CSS-off" onclick="sample(this)"></p> </body> </html>
- wynnjp
- ベストアンサー率71% (5/7)
以下のような感じでCSSを切り替えられると思います。 //切り替え条件に応じて値を入れる var csssource = "/xxx/aaa.css"; //<link タグを探す var linklist = document.getElementsByTagName("link"); //<linkタグの１つ目（条件に応じて変えてください）にcssを入れる linklist[0].href = csssource;
お礼
ご回答有難うございます！！！ すみません、初心者なもので・・・。 もし可能であれば具体的な記述方法をお教えいただけないでしょうか？ 一度サイトのほうで試してみたいと思います！ ちなみにCSSの定義は、head内に普通に行っているのですが これ自体は、問題ないのでしょうか？？ すみません！よろしくお願いいたします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
有難うございます。 ご指導いただいた通り試してみたのですが やはりうまくいきませんでした・・・。 ちなみに、CSSはページ内ではなく外部ファイルに全て 記述しているのですが、これが問題となっているのでしょうか？？ 何度もすみませんが、こちらに関してもご存知であれば アドバイスいただけると助かります・・・。 どうぞ、よろしくお願いします。