0

わかりました、私は jQuery にまったく慣れていません。本当に素晴らしいオプションがたくさんあるので、もっと早くこれに取り掛かるべきだったようです。今..次のことをしたい：

ユーザーがページのサイズを変更するときに、さまざまな要素の ClassName を同時に設定できるようにしたいと考えています。したがって、幅が範囲 A と B の間にある場合は、クラス 1 を設定し、B と C の間にある場合はクラス 2 を設定します。これまでのところ、私はこれを持っています:

<Script>
var sClass;
sClass = 'v11';
$(window).resize(function(){
CW = document.body.clientWidth;

if (CW >= 1 && CW <= 460) {sClass = 'v10';}
if (CW >= 461 && CW <= 770) {sClass = 'v11';}
if (CW >= 771 && CW <= 1100) {sClass = 'v12';}
document.getElementById('ZVal').value=CW;
document.getElementById('CVal').value=sClass;
    $(".zahbib").attr('class',sClass);
});
</script>

<Body LeftMargin='0' TopMargin='0' MarginHeight='0' MarginWidth='0'>

<InPut Type='Text' ID='ZVal'>
<InPut Type='Text' ID='CVal'>


<Table Width='100%' CellSpacing='0' CellPadding='0' Border='0'>
<Tr>
<Td class='zahbib' Width='40%'>Name:</Td>
<Td Width='60%'><InPut class='zahbib' Type='Text' Style='Width:100%'></Td>
</Tr>
<Tr>
<Td class='zahbib' Width='40%'>Email:</Td>
<Td Width='60%'><InPut class='zahbib' Type='Text' Style='Width:100%'></Td>
</Tr>
<Tr>
<Td class='zahbib' Width='40%'>Phone:</Td>
<Td Width='60%'><Select class='zahbib' Style='Width:100%'></Select></Td>
</Tr>
</Table>

</Body>

他のスタック オーバーフローの投稿からこのほとんど (特に jquery のもの) を取得しましたが、クラスの変更は 1 回だけ行われ、幅に応じて再度変更されることはありません。タスクを 1 回完了するように見えるだけで、テキスト フィールドもそうではないと思います。

それで、私は何を間違っていますか？sClass 値は正常に機能し、幅の読み取りと同様にデバッグ テキスト フィールドを更新します。ブラウザーによってわずかに異なる値を返す可能性があることはわかっていますが、それは問題ありません。超正確である必要はありません。

どうもありがとう。この jQuery のことをもっと徹底的に学び始めたいと思っています :) W

私が現在使用しているCSSは次のとおりです。

@media screen and (min-width: 1px) and (max-width: 460px){
zeb{font-size:12px}
zah{font-size:12px}
input.text{font-size:12px}
}
@media screen and (min-width: 461px) and (max-width: 770px){
zeb{font-size:16px}
zah{font-size:16px}
input.text{font-size:12px}
}
@media screen and (min-width: 771px) and (max-width: 1920px){
zeb{font-size:22px}
zah{font-size:22px}
input{font-size:12px}
}

zeb と zah は、通常 div を置く場所です。影響を与えたくないdivがいくつかある可能性があるため、DIVを使用しないことをお勧めします。このようにして、自分のタグを思いのままに簡単に作成でき、これは完全にうまく機能します。<div></div> （だから私が入力する代わりに<zah>and </zah>）それらは機能します。動かないのは入力フィールドだけです。ありがとうございました ：）

これはテーブルです：

<Table Width='100%' CellSpacing='0' CellPadding='0' Border='0'>
<Tr>
<Td Class='v11' Width='40%'><zeb>Name:</zeb></Td>
<Td Width='60%'><input Type='Text' Style='Width:100%'></Td>
</Tr>
<Tr>
<Td Class='v11' Width='40%'><zah>Email:</zah></Td>
<Td Width='60%'><input Type='Text' Style='Width:100%'></Td>
</Tr>
<Tr>
<Td Class='v11' Width='40%'><zah>Phone:</zah></Td>
<Td Width='60%'><Select Style='Width:100%'></Select></Td>
</Tr>
</Table>

そして、私が言ったように、zeb と zah ではフォント サイズが適切に調整されます :) ウィンドウのサイズを変更しても、入力フィールドだけは変更されません。zeb と zah はそうします :)

4

1 に答える 1

1

あなたがやろうとしていることは、メディアクエリを使用するとはるかに簡単に達成できると思います. ビューポートの幅に応じてスタイル ルールが適用されるように、ルールをメディア クエリに含めることができます。

たとえば、画面の幅が 1 ～ 460 ピクセルのときにすべての div のスタイルを設定するには、次のようにします。

@media screen and (min-width: 1px) and (max-width: 460px){
  div {
      color: red;
  }
}

さらに、幅が 461 ～ 770 ピクセルの場合、色を緑にしたいと言うことができます。

@media screen and (min-width: 1px) and (max-width: 460px){
  div {
      color: red;
  }
}

@media screen and (min-width: 461px) and (max-width: 770px){
  div {
      color: green;
  }
}

非標準の HTML 要素を使用しています。span要素を使用し、ID を使用して CSS でそれらを分離してみてください。

<Table Width="100%" CellSpacing="0" CellPadding="0" Border="0">
   <Tr>
      <Td Class="v11" Width="40%">
         <span class="zeb">Name:</span>
      </Td>
      <Td Width="60%"><input Type="Text" Style="Width:100%" /></Td>
   </Tr>
   <Tr>
      <Td Class="v11" Width="40%">
         <span class="zah">Email:</span>
      </Td>
      <Td Width="60%"><input Type="Text" Style="Width:100%" /></Td>
   </Tr>
   <Tr>
      <Td Class="v11" Width="40%">
         <span class="zah">Phone:</span>
      </Td>
      <Td Width="60%"><Select Style="Width:100%"></Select></Td>
   </Tr>
</Table>

これで、クラスzeb および zahを持つすべての要素に CSS を適用できます。

@media screen and min-width 1px and max-width 460px {
    .zeb, .zah, input.text
    {
        font-size:12px;
    }
}

@media screen and min-width 461px and max-width 770px {
    input.text
    {
        font-size:12px;
    }

    .zeb, .zah
    {
        font-size:16px;
    }
}

@media screen and min-width 771px and max-width 1920px {
    input
    {
        font-size:12px;
    }

    .zeb, .zah
    {
        font-size:22px;
    }
}

セレクターをコンマで区切って同一のルールを要約していることに注意してください。

于 2012-12-15T19:58:47.630 に答える