如何獲得文本節點的感知樣式？

window.getComputedStyle()方法只接受元素節點。 有什麼方法可靠地獲得決定文本節點視覺表示的風格？如何獲得文本節點的感知樣式？

我意識到節點不能有style屬性，但它們肯定是樣式的，因爲它們繼承了父元素的樣式。有沒有，也許，一種方式來從父元素獲取與文本節點的可視化表示相關的所有計算樣式？

注意，在span包裹節點出了問題：這會影響CSS規則，如span:nth-child或span + span等

2015-06-21 sbichenko

而不是您可以使用，因爲它不會有預定義的樣式... – dandavis

@dandavis這不會阻止元素更改應用CSS規則的方式。例如'：nth-child'選擇器可能會被破壞。 – sbichenko

好吧，沒有簡單/完美的方式，或者現在就會提出建議。我認爲給你最好的近似，你想要什麼。我不記得看過，也沒有看到通過一些大型圖書館看到的，沒有標籤或班級的'n'孩子'在前面狂奔......我認爲衝突的機會將是微不足道的，尋址。例如，僅將臨時應用於測量才能防止看起來被丟棄超過幾個ms，並且您可以在前面插入額外的節點，然後重新比較以過濾/檢測「parent *：n-child」規則... – dandavis

我會試試自己。

在父元素上使用window.getComputedStyle()並存儲標籤名稱和樣式信息。
使用存儲的標籤名稱創建一個新元素，並通過style屬性爲其分配樣式。
添加子元素<foo>元素（嚴格來說，它應該是當前CSS規則中未提及的標記名稱，以免影響它）。
將父元素附加到文檔的<head>（特定於Webkit）。
在子元素上使用window.getComputedStyle()。
將inline設置爲display屬性的值（因爲文本節點總是內聯的）。

請注意代碼片段的結果。 color是紅色，margin-left爲零，儘管父級具有左邊距，並且width（和height也是）是auto。

var source = document.querySelector('.bar'); 
 
var sourceStyle = window.getComputedStyle(source); 
 
var sourceTag = source.tagName; 
 
var clone = document.createElement(sourceTag); 
 
var child = document.createElement('foo'); 
 
var head = document.querySelector('head'); 
 

 
child.innerHTML = 1; 
 
child.setAttribute('style', 'display: inline;'); 
 
clone.appendChild(child); 
 
clone.setAttribute('style', sourceStyle.cssText); 
 
head.appendChild(clone); 
 
alert(window.getComputedStyle(source).marginLeft); // 100px 
 
alert(window.getComputedStyle(child).color); // rgb(255, 0, 0); 
 
alert(window.getComputedStyle(child).marginLeft); // 0px 
 
alert(window.getComputedStyle(child).width); // auto

.bar { 
 
    color: red; 
 
    margin-left: 100px 
 
    }

<html> 
 
    <head> 
 
    <title>An example</title> 
 
    </head> 
 
    <body> 
 
    <div class="bar"> 
 
     foo 
 
    </div> 
 
    </body> 
 
</html>

來源

2015-06-21 13:06:25 sbichenko

如果文本節點在唯一節點一個元素，你可以簡單地在其parentNode上使用getComputedStyle()。

然而，考慮以下因素：

div {border: 1px solid black;}

<div>This <em>is</em> a <strong>test</strong></div>

你不能說，「這」和「a」每個邊框。準確地說，「這個」具有頂部左下角的邊界，而「a」僅具有頂部邊界？這是值得懷疑的。

如果您將自己限制爲專門適用於文本（顏色，背景，文本裝飾，字體等）的樣式，則應在parentNode上應用getComputedStyle()應始終有效。

來源

2015-06-21 11:15:25

是否有一種可靠的方式來獲取專門適用於文本的樣式？ – sbichenko

是的，只需選取適用於文字的樣式即可。 – 2015-06-21 11:20:36

只需通過CSS標準並挑選出這些樣式？這看起來很不可靠，因爲標準容易改變，人類會犯錯。 – sbichenko

回答你的問題是，你不能。樣式應用於元素並由其內容塑造。元素的文本內容不是直接設計的，因爲它只是數據。其他答案和評論只是建議，以獲得元素的樣式，而不是你所要求的。所以你所要求的是無法完成的，因爲沒有對元素的數據（文本節點）應用樣式。

來源

2015-06-21 14:52:29 Rob

試圖編輯問題以使其有效。 – sbichenko

如何獲得文本節點的感知樣式？

回答

相關問題