CSS：從元素本身獲取邊框顏色

如何通過CSS獲取元素本身的顏色？我希望與文本本身的顏色具有相同的邊框顏色。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來解決這個問題，因爲頁面上有幾千個元素，並且這些類主要通過手機訪問。另外我知道通過style設置CSS不是最先進的技術，但有數百種不同的顏色值，並且爲每種顏色創建自己的CSS類是不合理的，不是嗎？

來源

2013-05-20 David

默認情況下邊框繼承了框的顏色propertie所以沒有設定顏色的CSS聲明：

border-bottom: 1px solid;

來源

2013-05-20 01:25:29 Maujor

哦，是的，該死的，我沒有嘗試。謝謝！ – David

邊框顏色的初始值是元素內容的顏色。這是*不*繼承。 –

是的，你是對的！感謝您指出這一點。 – Maujor

// using jquery 
$(document).ready 
(
    function() 
    { 
     $('.status-name').each(function(index, element) 
     { 
     $(element).css("borderColor", $(element).css('color')); 
     } 
    } 
);

JavaScript是更好的動態情況下使用，以及允許調整這如果您決定允許不符合典型CSS規則的更改，則可以輕鬆規劃未來。否則，其他答案應適合您的需求。

來源

2013-05-20 01:26:55

沒有關於問題的JavaScript標籤，OP要求提供純粹的CSS解決方案。 – pzin

理解，考慮到我基於動態規則改變屬性或樣式的觀點，簡單地提供可擴展輸入，超出OP規則要更改爲不由CSS處理的規則時的步驟nativly或其他用戶視圖這個問題在不同情況下需要這種修改。 –

試試這個：

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

它會自動繼承color

來源

2013-05-20 01:27:45 Lian

或更明確地說：'border-bottom：1px solid currentColor;' – jongo45

CSS：從元素本身獲取邊框顏色

回答

相關問題