Come si ottiene lo stile percepito di un nodo di testo? Il metodo

window.getComputedStyle() accetta solo nodi elemento. Esiste un modo per ottenere in modo affidabile lo stile che determina la rappresentazione visiva di un nodo di testo?Come si ottiene lo stile percepito di un nodo di testo? Il metodo

Mi rendo conto che i nodi non possono avere attributi style, ma sono certamente in stile, poiché ereditano gli stili dell'elemento genitore. C'è, forse, un modo per ottenere tutti gli stili calcolati dall'elemento padre che sono rilevanti per la rappresentazione visiva del nodo di testo?

Nota che avvolgendo il nodo in un span è fuori questione: questo potrebbe influenzare le regole CSS come span:nth-child o span + span, ecc

fonte

2015-06-21 sbichenko

anziché è possibile utilizzare , poiché non avrà stili predefiniti ... – dandavis

@dandavis questo non impedisce all'elemento di modificare il modo in cui le regole CSS vengono applicate. Per esempio, i selettori di ': nth-child' potrebbero rompersi. – sbichenko

beh, non c'è un modo facile/perfetto, o sarebbe suggerito da ora. penso che ti dia la migliore approssimazione a quello che vuoi. Non ricordo di aver visto, e non sono riuscito a trovare quando guardavo attraverso alcune grandi librerie, un ': nth-child' senza tag o classe imbullonato sul davanti ... Penso che la possibilità di conflitti sarebbe minima e indirizzabile. ad esempio, applicando temporaneamente lo solo per la misurazione si eviterebbe che l'aspetto venisse trascinato nel cestino per più di qualche ms, e si potrebbe inserire un nodo aggiuntivo in primo piano, quindi confrontare nuovamente per filtrare/rilevare le regole 'parent *: nth-child' ... – dandavis

Lo farò io stesso.

Utilizzare window.getComputedStyle() sull'elemento padre e memorizzare il nome del tag e le informazioni di stile.
Creare un nuovo elemento con il nome del tag memorizzato e assegnargli gli stili tramite l'attributo style.
Aggiungi un elemento figlio <foo> (in senso stretto, dovrebbe essere un nome di tag che non è menzionato nelle attuali regole CSS, in modo che non lo influenzino).
Collegare l'elemento padre allo <head> del documento (specifico per Webkit).
Utilizzare window.getComputedStyle() sull'elemento figlio.
Impostare inline come valore della proprietà display (poiché i nodi di testo sono sempre in linea).

Annotare i risultati del frammento di codice. color è rosso, margin-left è zero, nonostante il padre abbia un margine sinistro e width (e height) sia 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>

fonte

2015-06-21 13:06:25 sbichenko

Se il nodo di testo è l'unica nodo un elemento, si potrebbe semplicemente utilizzare getComputedStyle() sul suo parentNode.

Tuttavia, considerare quanto segue:

div {border: 1px solid black;}

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

Non si può dire che "questo" e "a" hanno ciascuno un bordo. Sarebbe corretto dire "Questo" ha i bordi in alto a sinistra, e "a" ha solo i bordi in alto a sinistra? Questo è discutibile.

Se ci si limita a stili che si applicano specificamente al testo (colore, sfondo, testo, carattere, ecc.), L'applicazione di getComputedStyle() su parentNode dovrebbe sempre funzionare.

fonte

2015-06-21 11:15:25

Esiste un modo affidabile per ottenere solo gli stili che si applicano specificamente al testo? – sbichenko

Sì, basta selezionare gli stili che si applicano al testo. –

Basta seguire gli standard CSS e scegliere questi stili? Questo sembra molto inaffidabile, dal momento che gli standard tendono a cambiare e gli umani commettono errori. – sbichenko

La risposta alla tua domanda è, non si può. Gli stili sono applicati agli elementi e sono modellati dal loro contenuto.Il contenuto testuale di un elemento non è stilizzato direttamente perché si tratta solo di dati. Le altre risposte e commenti sono solo suggerimenti per ottenere lo stile dell'elemento che non è quello che hai chiesto. Quindi quello che stai chiedendo non può essere fatto perché non c'è uno stile applicato ai dati, il nodo di testo, di un elemento.

fonte

2015-06-21 14:52:29 Rob

Tentativo di modificare la domanda in modo da renderla valida. – sbichenko

Come si ottiene lo stile percepito di un nodo di testo? Il metodo

risposta

Problemi correlati