Chrome wyświetla definicje (i odziedziczone definicje itp.) W panelu Dopasowane reguły CSS podczas sprawdzania elementu. Jednak panel Obliczone style wyświetla tylko obliczone style dla elementu głównego.Czy jest możliwe sprawdzenie stylów "obliczonych" dla :: after i :: before pseudo elements?

Mam całą hierarchię klas CSS dla pseudo elementów z pewnymi właściwościami odziedziczonymi i nadpisanymi itd., I chciałbym wiedzieć, czy istnieje jakikolwiek sposób, w jaki mogę zobaczyć zestaw stylów, które zostały faktycznie zastosowane (tj. Co obliczono pokazy stylu dla elementu głównego)

Jeśli ktokolwiek może rzucić na to jakiekolwiek światło, będzie to niezwykle pomocne.

Edit - 13 lut, 2014

Najnowsze wersje Chrome rzeczywiście ma to funkcja wbudowana w Może to trochę wątek miał coś wspólnego z nich, w tym go ?? :-)

2012-12-16 techfoobar

Tak, chociaż nie jest to aż tak oczywiste. Jeśli używasz Firebug, musisz upewnić się, że w rozwijanej karcie stylów masz zaznaczone "Tylko pokaż zastosowane style". Potem jak widać na poniższym zrzucie ekranu, powinieneś być w stanie wybrać elementy pseudo i wyświetlić ich stylizacji komputerowej (lub stylizacji, która jest stosowana), który bierze pod uwagę wszelkich zmian, itp

Computed styles

Źródło

2012-12-17 15:58:13 jezzipin

sobie sprawę używasz Chrome chociaż więc odpowiedź brzmi: prawdopodobnie nie. – jezzipin

Używam obu przeglądarek, mimo że chrom jest tym, czego używam częściej. Problem polega na tym, że nie mogę "wybrać" pseudo elementu w przeglądarce, ponieważ nie są one częścią DOM [i dlatego nie można go przekazać jako argumentu do getComputedStyle()]. Mogę tylko wybrać element główny, do którego mam dołączone pseudo elementy. W każdym razie, dzięki za wskaźnik. – techfoobar

Można to już zrobić w internetowym inspektorze przeglądarki Chrome. –

`window.getComputedStyle(element[, pseudoElt])`

pseudoElt Opcjonalnie

Łańcuch określający pseudo-element pasujące. Musi zostać pominięty (lub pusty) dla zwykłych elementów. Pseudoklasy można określić tak, jak ": focus".

Prawdopodobnie nie rozumiem, co próbujesz osiągnąć, ale tutaj jest trochę JavaScriptu do zabawy. Mam nadzieję, że jest to przydatne.

Powtarza każdy element dokumentu i próbuje uzyskać content z jego s. :before.
Jeśli znajdzie, wypisze dane do console.
Proste, ale możliwe do udowodnienia.

document.querySelectorAll("*").forEach((e) => { 
 
    const ebc = window.getComputedStyle(e, ":before").content, 
 
     eac = window.getComputedStyle(e, ":after").content; 
 
    if (ebc || eac) { 
 
    console.log(e); 
 
    console.log((ebc ? "Before content = " + ebc : "No :before content")); 
 
    console.log((eac ? "After content = " + eac : "No :after content")); 
 
    } 
 
});

div:before { 
 
    content: "This is a test."; 
 
} 
 
p:after { 
 
    content: attr(data-content); 
 
} 
 
span:after { 
 
    content: " dolor"; 
 
}

<div> 
 
    <p data-content="&hellip;">Lorem <span>ipsum</span></p> 
 
</div>

Źródło

2012-12-20 10:43:28

Czy jest możliwe sprawdzenie stylów "obliczonych" dla :: after i :: before pseudo elements?

Odpowiedz

window.getComputedStyle(element[, pseudoElt])

Powiązane problemy

`window.getComputedStyle(element[, pseudoElt])`