我知道我可以创建自定义的CSS规则(和LESS)来定义新的颜色,然后应用到任何元素,但是这里的兴趣是例如
h1{ /* #ff0000 is current deFinition of red,I want to redefine it to #FF4136 */ color: red; }
更新
我受到我的问题的启发,最后我在Blink和WebKit的源代码中挖掘出来,从我可以看到,这些颜色是在代码中定义的.
Webkit Line〜3299
static const ColorValue colorValues[] = { { CSSValueAqua,0xFF00FFFF },{ CSSValueBlack,0xFF000000 },{ CSSValueBlue,0xFF0000FF },{ CSSValueFuchsia,0xFFFF00FF },{ CSSValueGray,0xFF808080 },{ CSSValueGreen,0xFF008000 },{ CSSValueGrey,{ CSSValueLime,0xFF00FF00 },{ CSSValueMaroon,0xFF800000 },{ CSSValueNavy,0xFF000080 },{ CSSValueOlive,0xFF808000 },{ CSSValueOrange,0xFFFFA500 },{ CSSValuePurple,0xFF800080 },{ CSSValueRed,0xFFFF0000 },{ CSSValueSilver,0xFFC0C0C0 },{ CSSValueteal,0xFF008080 },{ CSSValueTransparent,0x00000000 },{ CSSValueWhite,0xFFFFFFFF },{ CSSValueYellow,0xFFFFFF00 },{ CSSValueInvalid,CSSValueInvalid } };
Blink〜线157
更新2
未来可能有一些希望. FireFox夜间构建包括CSS-variable的概念.尽管在这一点上具体的供应商,它几乎与我的问题有关.相关W3C规范:CSS Custom Properties for Cascading Variables Module Level 1 – 参见示例4
解决方法
您将无法查询计算的DOM元素样式,也可以随时替换它们,因为计算的颜色值始终为rgb()或rgba()三元组,即使级联值为关键字.这在规范中说明您链接到:
- The computed value for basic color keywords,RGB hex values and extended color keywords is the equivalent triplet of numerical RGB values,e.g. six digit hex value or rgb(…) functional value,with an alpha value of 1.
在您的示例CSS规则中,h1元素的计算颜色为rgb(255,0),而不是红色.在这种情况下,您无法区分#ff0000或rgb(255,0)的红色,如果您只专门针对红色关键字,则可能会导致问题.
您可以使用脚本直接解析和修改样式表,但CSS解析并不容易.你必须考虑到速记声明,URL(例如background:red url(redimg.png)center center no-repeat;)等等.这可能超出了您的问题的范围.
自定义属性仅允许您指定一个级联变量来代替关键字作为值.您将无法使用自定义属性修改现有的预定义关键字,因此您仍然必须用var(红色)替换每个出现的红色,其中var-red属性对应于用户定义的红色.
原文地址:https://www.jb51.cc/css/217125.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。