Webboard

Pełna wersja: Dlaczego wartość właściwości obiektu jest zależna od miejsca umieszczenia stylu?
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.
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).

Kod:
<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>
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:

  • lokalnie

  • w nagłówku dokumentu

  • w wyodrębnionym pliku (styl zewnętrzny)
Stąd moje pytanie:
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?  
Wydaje mi się, że chodzi Ci oto:
Cytat:HTMLElement.style
The style read-only property returns the inline style of an element in the form of a CSSStyleDeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element's inline style attribute.
https://developer.mozilla.org/en-US/docs...ment/style

Czyli że odczytujesz wartość opacity ustawioną dla #p2 w stylu inline, którego nie ma. W #p1 jest, dlatego tam się pojawia odpowiednia wartość.

Chcąc odczytać wartość ustawioną w innym miejscu niż w atrybucie style - inline, możesz zastosować Window.getComputedStyle()


Czyli przykładowo:
Kod:
console.log(getComputedStyle(document.querySelector('#p2')).opacity); //"0.4"