JavaScriptが無効なときにだけスタイルシートを適用、

[新着] Webテンプレートを仮オープンしました

0   名前： KKK ： 2006/12/27（水） 20:12  ID:G9j2MhsW
どこで聞いたらいいのかわからなかったので、ここで聞きます。

JavaScriptが有効なときには、スタイルシートを適用せずに、JavaScriptが無効なときにだけスタイルシートを適用する、というのは可能ですか？
可能ならばその方法を教えてください。よろしくお願いします。
1   名前： 匿名 ： 2006/12/27（水） 20:12  ID:fqUPSjiv
>>0
> JavaScriptが有効なときには、スタイルシートを適用せず

// ('StyleSheets', '2.0')
var ss = document.styleSheets;
var I = ss.length;
var i = 0;
while (i < I) ss[i++].disabled = true;
2   名前： KKK ： 2006/12/27（水） 20:12  ID:G9j2MhsW
ありがとうございます。

これを指定したスタイルシートにだけに有効にするということもできるのですか？
答えていただいたばかりなのに申し訳ありません、
申し遅れましたが、私は、スタイルシートのことは多少はわかっているのですが、JavaScriptのことはあまりよくわかっていません。
よろしくお願いします。
3   名前： 匿名 ： 2006/12/27（水） 20:12  ID:fqUPSjiv
できる。

で、具体的なソースがなければ、具体的なコードは書けないんだが。


とりあえず以下にヒントだけ。

・方法 1：document.styleSheets には、文書に適用されているスタイルが順に格納されている。それぞれ disabled プロパティを持っている（cf. >>1）。

・方法 2：link 要素ノード、style 要素ノードは disabled プロパティを持つ。

・方法 3：xml-stylesheet 処理命令ノード、link 要素ノード、style 要素ノードは、sheet というプロパティを持つ。sheet は disabled プロパティを持っている。

ノードは getElementsByTagName(NS) で取得しても良いし、ツリーを辿って取得しても良い。自分が実際に書いている (X)HTML 構造に合わせて、上記のうち好きな方法を選べば良い。

他、ノードを removeChild するとか、スタイル内容を空文字列で上書きするなどの荒業もないこともない。ブラウザによってはこうやらざるをえない場合もある。
4   名前： KKK ： 2006/12/27（水） 20:12  ID:G9j2MhsW
教えてくださったのをいろいろ試してみましたができませんでした。
私のJavaScriptに関する知識が少なすぎるからだと思います。

> 具体的なソースがなければ、具体的なコードは書けないんだが。

どのような具体的なソースを書けばいいのですか。
現在私は、JavaScriptでスタイルシートを指定するようにしていて、JavaScriptを無効にしているブラウザで見ると、まったくスタイルシートが適用されないので、JavaScriptが有効なときのスタイルシートと無効なときのスタイルシートを別に指定したいのです。
はじめから言っておけばよかったのに、後になってからこんな事を言ってすみません、はじめの質問の仕方と少し違ってしまうような気もしますが、よろしくお願いします。

5   名前： 匿名 ： 2006/12/27（水） 20:12  ID:fqUPSjiv
<!-- link 要素には id 属性を付けられる -->
<link rel="stylesheet" type="text/css" href="sample1.css" id="sample">


<script type="text/javascript">
// sample2.css に変更
document.getElementById ('sample').href = 'sample2.css';
</script>


<!-- style 要素には id 属性を付けられない -->
<style type="text/css">...</style>


<script type="text/javascript">
/// 0 番目（最初）の style 要素を無効化
document.getElementsByTagName ('style')[0].disabled = true;
</script>


<!-- xml-stylesheet PI は、document.styleSheets を見るのが楽 -->
<?xml-stylesheet type="text/css" href="sample1.css"?>


<script type="text/javascript">
/// sample2.css に変更
document.styleSheets[0].href = 'sample2.css';
</script>


<!-- 優先スタイルシートを判別するのはちょっとだけ手間 -->
<link rel="stylesheet" type="text/css" href="sample1.css" title="sample">


<script type="text/javascript">
/// 優先スタイルシートを sample2.css に変更
for (var ss = document.styleSheets, I = ss.length, i = 0; i < I; i++) {
    if (ss[i].title == 'sample') { ss[i].href = 'sample2.css'; brek; }
}
</script>

<script type="text/javascript">
// Gecko、Opera の場合は以下で済む
document.evaluate ('//link[@title="sample"]', document.documentElement,
  null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.href = 'sample2.css';
</script>
6   名前： KKK ： 2006/12/27（水） 20:12  ID:G9j2MhsW
できました！

匿名さん、ありがとうございます。

style 要素には id 属性を付けられないけど link 要素には id 属性を付けられるのですね。両方とも無理だと思っていました。

親切に教えて下さって、本当にありがとうございます。
一覧へ戻る