4

我有一些需要设置样式的 HTML 代码，这些代码由 Web 服务自动生成。我得到的部分代码如下所示：

<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，使用 50px 宽度......等等）

谢谢你的帮助。我知道这是一个很长的机会，我最好的选择是使用 javascript，但是，嘿，我不得不问 ;-)

4

3 回答 3

6

是的，有限制

我一直在思考一个类似于 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;
}
于 2012-11-23T15:55:09.933 回答
3

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

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

我为示例选择了“开头”语法，您可以在此处查看其他类型：http: //css-tricks.com/attribute-selectors/

字段的最大长度确实应该通过 maxlength 属性设置（您也可以像我上面所做的那样匹配）。但是，如果它是自动生成的，那么您就无能为力了。

于 2012-11-22T02:42:37.930 回答
0

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

<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 中对其进行解析。

有很多方法。

于 2012-11-22T01:38:36.003 回答