根据类名“range”分配CSS属性

Question

我需要为一些由Web服务自动生成的HTML代码进行样式设计。我得到的代码的一部分看起来像这样：

<input type='text' id='txtField001' class='txtField150'>foo</input>    
<input type='text' id='txtField002' class='txtField10'>bar</input>
<input type='text' id='txtField001' class='txtField142'>sum</input>

现在，这里有一个“奇怪”的部分：跟随类名的数字（即150、10和142）实际上是文本字段接受的最大字符数，因此它给了我一个“提示”，告诉我文本字段应该呈现多宽：对于150而言宽些，对于10而言则较短；由于这个数字变化很大（它是由调用Web服务的用户定义的），因此不实用创建“n”个类以符合所有可能的值。

那么，有没有办法拥有“范围类”或类似的东西 - 牢记理论上我不能更改Web服务正在传送的任何内容，而且我确实不想用JavaScript来评估事情？

具体而言，是否有声明类似以下内容的方法（我知道这有点夸张）？

.txtField1 ... .txtField50 {
    width: 50px;
}

.txtField50 ... .txtField100 {
    width: 80px;
}

.txtField100 ... .txtField150 {
    width: 120px;
}

在我脑海中的理解是：“对于范围在1到50之间的任何类txtField，使用50像素的宽度...等等”。感谢你的帮助。我知道这有些难以实现，我的最佳选择是使用JavaScript，但嘿，我还是要问一下的;-)

- Vitor Enes

Answer 1

是的，但有限制

我一直在思考一个类似于cimmanon的解决方案，只是我知道它需要比那个更加精细（这就是为什么回答需要一些时间的原因）。

让我先声明，这可能需要一个实用的限制（我不知道在你的情况下它可以是多少个字符的限制）。正如您在我的示例fiddle中所看到的，任何300+都无法解析为更大的尺寸。如果存在高或未知的上限，则javascript确实是您最好的解决方案。我的示例适用于小于300的情况，也许可以用不太多的代码做到999。但是1000+我认为是不合理的。

CSS

/* set default as small size */
[class ^= "txtField"] {
    width: 50px;
}

/* weed out 50-99, making sure not to get 5-9 */
[class *= "d5"]:not([class $= "d5"]),
[class *= "d6"]:not([class $= "d6"]),
[class *= "d7"]:not([class $= "d7"]),
[class *= "d8"]:not([class $= "d8"]),
[class *= "d9"]:not([class $= "d9"])
{
    width: 80px;
}

/* weed out 100-199, making sure not to get 1 or 10-19
   NOTE: this becomes a highly specific selector
*/
[class *= "d1"]:not([class $= "d1"]):not([class $= "d10"]):not([class $= "d11"]):not([class $= "d12"]):not([class $= "d13"]):not([class $= "d14"]):not([class $= "d15"]):not([class $= "d16"]):not([class $= "d17"]):not([class $= "d18"]):not([class $= "d19"])
{
    width: 120px;
}

/* weed out 150-199, making sure not to get 15-19
   NOTE: because the previous selector is so specific, this one
   needed the !important flag (which I hate to use, but here
   seemed to be the best and only solution)
*/
[class *= "d15"]:not([class $= "d15"]),
[class *= "d16"]:not([class $= "d16"]),
[class *= "d17"]:not([class $= "d17"]),
[class *= "d18"]:not([class $= "d18"]),
[class *= "d19"]:not([class $= "d19"])
{
    width: 150px !important;
}

/* weed out 200-299, making sure not to get 2 or 20-29
   NOTE: again high specificity
*/
[class *= "d2"]:not([class $= "d2"]):not([class $= "d20"]):not([class $= "d21"]):not([class $= "d22"]):not([class $= "d23"]):not([class $= "d24"]):not([class $= "d25"]):not([class $= "d26"]):not([class $= "d27"]):not([class $= "d28"]):not([class $= "d29"])
{
    width: 180px;
}

/* weed out 250-299, making sure not to get 25-29
   NOTE: !important needed again;
   also, anything 300+ reverts back to smallest size unless
   one keeps going... maybe 999 could be reached "reasonably"
*/
[class *= "d25"]:not([class $= "d25"]),
[class *= "d26"]:not([class $= "d26"]),
[class *= "d27"]:not([class $= "d27"]),
[class *= "d28"]:not([class $= "d28"]),
[class *= "d29"]:not([class $= "d29"])
{
    width: 210px !important;
}

- ScottS

---

这实际上是一个非常好的解决方案，而且300已经足够满足我的需求了。谢谢！你真的帮了我很多！ - Vitor Enes

Answer 2

如果您无法以任何方式修改类，可以通过CSS属性选择器进行部分匹配：

input[class^="txtField10"] /* catch txtField10, txtField100, txtField1000, etc */
input[class^="txtField150"] /* catch txtField150, txtField15064, txtField150829, etc */

我选择了“以...开始”的语法作为例子，你可以在这里看到其他类型: http://css-tricks.com/attribute-selectors/

字段的最大长度确实应该通过maxlength属性设置(就像我上面所做的那样)。 但是如果它是自动生成的，你真的无能为力。

- cimmanon

Answer 3

另一种方法是在您的对象上拥有多个类：

<input type='text' id='txtField001' class='txtField width150'>foo</input> 

或者更好的是，使用不与绝对实现相关联的东西（这是我在自己的内部开发框架中做的，在那里我将狭窄、宽等作为标准字段宽度）：

<input type='text' id='txtField001' class='txtField wide'>foo</input> 

这样，如果您调整了实现的细节，就不必调整每个类。

这种方法非常适合与脚本技术、生成的CSS文件或其他一些效率或一致性机制相结合。

为了遵循上一个答案中的示例，使用Dojo，因为我不是jQuery专家，您可以进行格式化，如下所示：

var widths = {
   narrow:  '10em';
   wide: '30em';
}

for (m : widths) {
   if widths.hasOwnProperty(m) {
      dojo.query('.' + m).style('width', widths[m]));
   } 
}

如果您一定要在各种样式中编码特定的宽度，那么仍然可以有一个额外的类来选择节点进行脚本处理。您可以基于共享类进行选择，然后检查所有类以获取带参数的类。

如果您不遵循严格的验证合规性，您也可以将此信息嵌入自定义属性而不是类中，然后在JavaScript中解析该属性。

有许多方法可供选择。

- SAJ14SAJ

---

这是一个很好的建议。如果没有人提出不同/替代的方法，我可能会采用这种方式。非常感谢！ - Vitor Enes