画面サイズに基づくHTML変更クラス名

ユーザーが画面サイズに基づいてページをロードするときに、クラスタグの名前を動的に変更しようとしています。画面サイズに基づくHTML変更クラス名

<!DOCTYPE html> 
<html> 
<body onload="changeClass()"> 

<section class="example"> 
    <p>Hello</p> 
</section> 

<section class="example"> 
    <p>New section</p> 
</section> 

<script> 
function changeClass() { 
    var x = document.getElementsByClassName('example'); 
    var width = (window.innerHeight > 0) ? window.innerHeight : screen.Height; 
    console.log(width); 
    if(width <= 640) { 
     while(x.length > 0) { 
      x[1].className ='newClass'; 
     } 
    } else { 
     while(x.length > 0) { 
      x[0].className = "example"; 
     } 
    } 
} 
</script> 
</body> 
</html>

ただし、ページは無限ループにスローされ、データをロードできません。画面のサイズに基づいてクラスを設定する簡単な方法はありますか？ページが読み込まれたときに「if条件付き」チェックを使用できますか？私はJSFiddleも含んでいます。私はどれくらい助けてくれるのか分かりません。

出典

2017-03-08 Dexstrum

なぜあなたはCSSでメディアクエリではなくJavaScriptでこれをやっていますか？スタイルの変更を処理するためにJavaScriptを使用するのはちょっと残念です。 – Puzzle84

画面サイズに基づいて要素に異なるスタイルを適用することの最終目標はありますか？クラス名を変更する別の理由がありますか？ –

私はこれを行う最も簡単な方法を探しています。オンラインの人々はJavascriptを提案していました。画面サイズに基づいて要素名を変更したいだけです。 – Dexstrum

コメントに記載されているように、メディアクエリはここで何をしようとしているのかを達成するための最良の方法です。

あなたのコードで現れている実際の質問に答えるには、whileループを使用しているため、あなたは無限ループに入っています。配列の長さはゼロにならないので、whileループは決して終了しません。

は明らかにあなたが両方whileループを変更する必要があり、次のコード

if(width <= 640) { 
    for(var i = 0; i < x.length; i++) { 
     x[i].className ='newClass'; 
    } 
}

を使用することを検討してください。

私は強くと言いましたが、魅力的な理由がない限り、これに対してメディアクエリを使用することをお勧めします。

アイデアだけで、画面のサイズに基づいてスタイルを変更する場合は、あなたのスタイルシートに次の追加でこれを達成することができ

@media (max-width: 640px) { 
    .example { 
     ... styles to show on smaller screens .... 
    } 
}

出典

2017-03-08 03:44:11

ありがとうございます。私はメディアクエリを使用する方法を知っています。彼らは私が書いた方法でコードを修正する必要があります。私が直面しているこの特定の問題に対して、より簡単な方法を探していただけです。 – Dexstrum

私はあなたのコードで見ることができる問題がいくつかあります。まず、画面の幅が正しく表示されないということです。

以下のように修正する必要があります。

var width = (window.innerWidth > 0) ? window.innerWidth : screen.Width;

もう1つのことは、ループを一切必要としないことです。ちょうど次のコードは、あなたが探しているものを達成するのに十分なものです。

function changeClass() { 
    var x = document.getElementsByClassName('example'); 
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.Width; 
    console.log(width); 
    if(x.length > 0) { 
     if(width <= 640) { 
      x[1].className ='newClass'; 
     } else { 
      x[0].className = "example"; 
     } 
    } 
}

出典

2017-03-08 03:59:32

画面サイズに基づくHTML変更クラス名

答えて

関連する問題