是否可以通過CSS 3使用文本內容設置元素中文本的顏色？

好的，所以這是一個更多的問題，它有很多不是CSS的解決方案，但我正在從理論的角度來尋求更多的解決方案。我有一個應用程序，但不值得以任何其他方式進行編碼。是否可以通過CSS 3使用文本內容設置元素中文本的顏色？

的（FUN）問題

你如何利用色彩元素的文本元素的文本？我有一個元素，都在它自己的，它將包含一個顏色的十六進制值，我希望文本是那種顏色，但我只想使用CSS（可能只能使用CSS 3來完成）。

樣本HTML

<div class="color_contents">#0000FF</div>

所以，我試圖用沒有成功使用attr()，但我不知道我使用的是正確的內容（我試過text，textContent，和innerText無效）。不需要跨瀏覽器，但只是一種方法來實現它。

來源

2011-10-19 Ktash

你能用Javascript嗎？ – Valchris

我可以，但我正在尋找一個純粹的CSS解決方案。再一次，有很多方法可以實現這一點，但我只想用CSS來完成。 – Ktash

@Valchris我猜這將算作一個不是CSS的解決方案。 – cincodenada

目前，還沒有辦法用CSS來訪問元素的文本內容，甚至不與今天可用的CSS3模塊。

對此：

所以，我試圖用沒有成功使用attr()，但我不知道我使用的是正確的內容（我試過text，textContent，和innerText無效）。不需要跨瀏覽器，但只是一種方法來實現它。

attr()只看元素屬性（foo="bar"）。由於文本內容不是HTML元素的屬性（儘管它是相應DOM對象的成員），因此無法使用該函數對其進行查詢。

沒有類似的函數來訪問元素的文本內容。

來源

2011-10-20 01:32:06 BoltClock

也許內容是由OP生成的，他可以使用'

#0000FF

'並使用漸進式增強來設置顏色爲[data-color] {color：attr（data-color，color）; }'。 – ANeves

你說得對，我現在編輯了評論。我讀'以下功能處於危險中，可能會在CR期間被丟棄：'vh'，'vw'，'vm'，'fr'，'gr'，'cycle（）'，'attr（）' .'在http://www.w3.org/TR/css3-values/#status，但是當我編輯添加一個源時，我也發現：http://www.w3.org/TR/css3-values /＃attr，所以決定刪除它。 – ANeves

你的所有帖子都是正確的，所以+1。我嘗試使用'attr（）'真的試圖看看我是否可以'竊聽'我的方式來獲取文本內容。我的問題實際上是完全實現了所提到的內容，但它是一種思考實驗/黑客內容，以查看是否有人可以使用某些創意CSS獲取元素的文本內容。例如，我也試過'content：inherit;'無濟於事，我認爲這是一個更有用的用例。 – Ktash

你可以做這樣的事情。這是一個有點哈克，但所有的CSS

div.color_0000FF:before{ 
    color:#0000FF; 
    content: "#0000FF"; 
}

HTML

<div class="color_0000FF"></div>

例子：http://jsfiddle.net/s8vLy/

來源

2011-10-20 01:15:20

是的，我知道我可以使用類和內容。但是裏面的代碼將是一個隨機的（至少對我來說）十六進制字符串，所以我不能/不想爲所有情況編碼。這也意味着CSS挑戰比任何事情都重要，我會盡可能地給予獎勵。 – Ktash

雖然理論上你可以使用'div [class^= color_]'作爲選擇器，但是你遇到了類似的問題。 – Ktash

內容/屬性CSS屬性只能與:before和:after僞元素一起使用。

CSS3將支持從其他屬性訪問attr，請參閱https://developer.mozilla.org/en/CSS/attr。

但是，如果CSS3 attr上線，您仍然無法訪問CSS中元素的「內容」，因爲這不是CSS設計的目的。

底線，使用javascript :)

來源

2011-10-22 07:25:14 xmarcos

是否可以通過CSS 3使用文本內容設置元素中文本的顏色？

的（FUN）問題

樣本HTML

回答

相關問題