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>

我从其他 Stack Overflow 帖子中得到了大部分内容（尤其是 jquery 的东西），但是更改类只发生一次，然后它不会再次根据宽度更改。我认为它似乎只完成了 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>

现在你可以将你的 CSS 应用到所有类zeb 和 zah 的元素上：

@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 回答