Są dwa identyczne obiekty (<p>), po najechaniu których próbuję wyświetlić wartość przezroczystości.
Dlaczego wyświetla się tylko dla stylu lokalnego, a dla stylu w nagłówku dokumentu nie? (choć przezroczyste są oba obiekty).
Wartość opacity jest ustawiona dla obu paragrafów: zarówno p1, jak i p2.
Różnica jest tylko taka, że STYL JEST USTAWIANY W INNYM MIEJSCU
Style kaskadowe (CSS) występują na trzech poziomach:
Skoro oba paragrafy mają ustawione opacity, to dlaczego w DOM jest informacja inicjowana ze stylu lokalnego p1?
A to wersja nieco zubożona, którą można prześledzić w Chromie F12:
sprawdzamy 'Properties' odpowiednio dla 'p#p1' i 'p#p2'
style -> opacity (p#p1)="0.8"
style -> opacity (p#p2)=""
Dlaczego tak się dzieje?
Dlaczego wyświetla się tylko dla stylu lokalnego, a dla stylu w nagłówku dokumentu nie? (choć przezroczyste są oba obiekty).
<head>
<style>
#p2 {opacity:0.4;}
</style>
</head>
<body>
<p id="p1"
onmouseover='alert("p1=["+document.getElementById("p1").style.opacity+"]");'
style="background-color:yellow; width:100px; opacity:0.8;">
test --p1--</p>
<p id="p2"
onmouseover='alert("p2=["+document.getElementById("p2").style.opacity+"]");'
style="background-color:yellow; width:100px;">
test --p2--</p>
</body>Różnica jest tylko taka, że STYL JEST USTAWIANY W INNYM MIEJSCU
Style kaskadowe (CSS) występują na trzech poziomach:
- lokalnie
- w nagłówku dokumentu
- w wyodrębnionym pliku (styl zewnętrzny)
Skoro oba paragrafy mają ustawione opacity, to dlaczego w DOM jest informacja inicjowana ze stylu lokalnego p1?
A to wersja nieco zubożona, którą można prześledzić w Chromie F12:
sprawdzamy 'Properties' odpowiednio dla 'p#p1' i 'p#p2'
style -> opacity (p#p1)="0.8"
style -> opacity (p#p2)=""
Dlaczego tak się dzieje?
