3

私は実際に3週間以来解決しようとしている問題を抱えています。vw ユニットのサポートをテストし、ブラウザーがユニットをサポートしていない場合は別のスタイルシートを提供しようとしています。modernizr チュートリアルを読み、modernizr css 検出に精通していますが、vh ユニット (ビューポート相対ユニット) のテストはネットで見つけられなかったものです。 .

だから基本的に：

シナリオ 1: ブラウザーは vw ユニットをサポートし、スタイルシート A を提供します。

シナリオ 2: ブラウザーがサポートしていないため、スタイルシート B を提供します。

Modernizr.cssvwunit と呼ばれるコア以外の検出があることはわかりましたが、正直なところ、このコンテキストでどこから始めてどのように使用すればよいかわかりません。

私の知識を広げるのを手伝ってくれたら、それは素晴らしいことです。また、あまりにも面倒でなければ、私が勉強できる例のjsfiddleは非常に役に立ちます。

心から、

マーカス

編集:なぜelseステートメントだけを起動するのですか? http://jsfiddle.net/5saCL/10

<script>
  if (Modernizr.cssvwunit) {
    alert("This browser supports VW Units!");
  } else {
    alert("This browser does not support VW Units!");
  }
</script>
4

2 に答える 2

5

このチュートリアルhttp://www.developphp.com/view.php?tid=1253を見ると、JavasSript で CSS スタイルを変更する方法がわかります。

要件に合わせてスクリプトを少し編集するだけです。

<!DOCTYPE html>
<html>
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<script type="text/javascript">
  if (Modernizr.cssvwunit) {
    document.getElementById('pagestyle').setAttribute('href', "styleVW.css");
  } else {
    document.getElementById('pagestyle').setAttribute('href', "style.css");
  }
</script>
</head>
<body>
<h2>Javascript Change StyleSheet Without Page Reload</h2>
<!-- no buttons needed -->
</body>
</html>

これはうまくいくはずです。

于 2014-06-08T16:01:52.947 に答える