[英]Performing calculations (calc) on data attributes in CSS (e.g. modulus)
I just learned that I can select elements by using data-attributes, which is great. 我刚刚了解到可以使用数据属性来选择元素,这很棒。 I then want to stylize these elements differently based on certain calcutions.
然后,我想根据某些计算方式对这些元素进行不同的样式设置。 for example, I want to have 4 varieties of style, and I want to use modulus of the existing
[data-pid]
attribute of the elements to help determine the style. 例如,我想拥有4种样式,并且我想使用元素的现有
[data-pid]
属性的模数来帮助确定样式。
For example, imagine there are a set of divs containing text that has one of four font colors (eg red, orange, yellow, or green), and that an individual div's color depends on its modulus of four. 例如,假设有一组包含文本的div,该文本具有四种字体颜色(例如,红色,橙色,黄色或绿色)中的一种,并且单个div的颜色取决于其四次模数。 I believe the CSS (if it is possible) would go something like this:
我相信CSS(如果可能的话)会像这样:
div[0=data-pid-modulus-by-4]{
color: red;
}
div[1=data-pid-modulus-by-4]{
color: orange;
}
div[2=data-pid-modulus-by-4]{
color: yellow;
}
div[3=data-pid-modulus-by-4]{
color: green;
}
Is it possible to calculate the modulus of a data-pid/attribute using just CSS in a way similar to what I illustrate above or do I have to use javascript to accomplish this modulus of an attribute's value? 是否可以仅使用CSS来计算数据pid /属性的模数,其方式类似于我上面说明的方式,还是必须使用JavaScript来完成属性值的模数计算? If it is not possible can someone suggest the smallest/easiest js solution they can think of to do it?
如果不可能,有人可以建议他们想到的最小/最简单的js解决方案吗?
Thanks! 谢谢!
Here's a simple JavaScript solution: 这是一个简单的JavaScript解决方案:
var pids = document.querySelectorAll('[data-pid]'); Array.prototype.forEach.call(pids, function(elem, index) { elem.classList.add('pid-mod-' + (index % 4)); });
.pid-mod-0 { color: red; } .pid-mod-1 { color: orange; } .pid-mod-2 { color: yellow; } .pid-mod-3 { color: green; }
<div data-pid="0">0</div> <div data-pid="1">1</div> <div data-pid="2">2</div> <div data-pid="3">3</div> <div data-pid="4">4</div> <div data-pid="5">5</div> <div data-pid="6">6</div> <div data-pid="7">7</div>
If all the elements are siblings of each other, then you can use :nth-of-type()
or :nth-child()
with a range. 如果所有元素都是彼此的兄弟姐妹,则可以将
:nth-of-type()
或:nth-child()
与范围一起使用。
div[data-pid]:nth-of-type(4n+1){ color: red; } div[data-pid]:nth-of-type(4n+2){ color: orange; } div[data-pid]:nth-of-type(4n+3){ color: yellow; } div[data-pid]:nth-of-type(4n+4){ color: green; }
<div class="only-pids-in-here"> <div data-pid="0">0</div> <div data-pid="1">1</div> <div data-pid="2">2</div> <div data-pid="3">3</div> <div data-pid="4">4</div> <div data-pid="5">5</div> <div data-pid="6">6</div> <div data-pid="7">7</div> </div>
You can not calculate the value directly in CSS, nor SASS/LESS. 您不能直接在CSS中或SASS / LESS中计算值。
You will have to use Javascript in order to do that. 为此,您必须使用Javascript。
Which makes total sense as calculating parts of html in CSS even if would be doable would be terrible practice. 完全可行,因为即使在CSS中计算html中的html部分,这也是很糟糕的做法。
You cannot perform arithmetic calculations with the values of attribute selectors within a selector. 您不能使用选择器中的属性选择器的值执行算术计算。 Attribute values are always strings, and only support substring matching at best.
属性值始终是字符串,并且最多仅支持子字符串匹配。
The attr() function can be used with any CSS property, but support for properties other than content is experimental.
attr()函数可以与任何CSS属性一起使用,但是对内容以外的属性的支持是试验性的。
In theory, you should be able to do 从理论上讲,您应该能够
div[data-color] {
color: attr(data-color, 'color');
}
But nothing seems to support it. 但是似乎没有任何支持。
I was thinking maybe you could use that in conjunction with calc but calc
doesn't support modulo either, so there's really no way for you to calculate a color from a pid using CSS properties. 我在想,也许您可以将其与calc结合使用,但是
calc
也不支持模数,因此,实际上您无法使用CSS属性从pid计算颜色。
I think you're out of luck. 我觉得你不走运。 You should do the calculation of pid->color in whatever template language you're using instead, should be just as easy to do.
您应该使用所使用的任何模板语言来计算pid-> color,应该同样容易。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.