Webboard

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"

Johanson

Poftorek