根据类“范围”分配CSS属性

时间:2012-11-22 01:08:53

标签: css class css-selectors

我有一些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;
}

(我在脑海里读到这个:“对于任何类别txtField,范围从1到50,使用50px宽度......等等)

感谢您的帮助。我知道这是一个很长的镜头,我最好的选择是使用javascript,但是嘿,我不得不问; - )

3 个答案:

答案 0 :(得分:4)

是的,有限制

我一直在思考一个类似于cimmanon的解决方案,只是我知道它需要比那更精致(这就是为什么它需要一些时间来回答)。

让我先说明这可能需要一个实际的限制(我不知道你的情况下它的字符数是否有限制)。 As you can see in my example 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;
}

答案 1 :(得分: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属性设置(你也可以像我上面那样匹配)。但如果它是自动生成的,那么你可以做的并不多。

答案 2 :(得分: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中解析该信息。

有很多方法。