3

如何通过 CSS 获取元素本身的颜色？我希望边框颜色与文本本身的颜色相同。

示例 HTML：

<span class="status-name" style="color:#ff0000">Max</span>

CSS：

.status-name {
    font-weight: bold;
    border-bottom: 1px solid ???;
}

底部边框现在应该有颜色#ff0000了。我尝试了inherit，auto甚至attr(data-color)（与data-color="#ff0000"属性结合），但都使规则对浏览器无效。

请注意，如果可能的话，我需要通过 CSS 解决这个问题，因为页面上有数千个具有此类类的元素，并且主要通过手机访问。我也知道通过设置 CSSstyle不是最先进的，但是有数百种不同的颜色值，为每种颜色创建一个自己的 CSS 类是不合理的，不是吗？

4

3 回答 3

7

默认情况下，边框继承盒子的颜色属性，因此在 CSS 声明中不设置颜色：

border-bottom: 1px solid;
于 2013-05-20T01:25:29.207 回答
1

尝试这个：

.status-name {
    font-weight: bold;
    border-bottom: 1px solid;
}

它会自动继承color

于 2013-05-20T01:27:45.203 回答
0 
// using jquery
$(document).ready
(
   function()
   {
      $('.status-name').each( function(index, element) 
      {
         $(element).css("borderColor", $(element).css('color'));
      }
   }
);

Javascript 更适合在动态实例中使用，并且如果您决定允许不遵循典型 CSS 规则的更改，将来也可以轻松调整此规则。否则，其他答案应该可以满足您的需求。

于 2013-05-20T01:26:55.577 回答