How to Accurately Retrieve the Display Property of a DOM Element and Why the .style Property May Return Empty Strings

Retrieving the Display Property of a DOM Element: Unveiling the True Value

The provided HTML code introduces a paragraph and an anchor with differing display styles. However, retrieving these styles through the style property seems to result in unexpected empty strings. Why is this the case, and how can you accurately retrieve the display property?

The Riddle of the Empty String

The initial confusion arises because the .style.* properties map directly to the style attribute, not to the applied style. This means that you're essentially checking the inline style declaration, which may not always reflect the computed style.

The Solution: getComputedStyle

To obtain the actual applied style, including inherited properties, you need to use the getComputedStyle method. This method takes a DOM element as an argument and returns a CSSStyleDeclaration object containing computed style values.

The provided code can be modified to use getComputedStyle as follows:

<code class="javascript">var a = (document.getElementById('a'));
alert(getComputedStyle(a).display);
var p = (document.getElementById('p'));
alert(getComputedStyle(p).display);
p.style.display = 'none';
alert(getComputedStyle(p).display);</code>

Now, the first alert will display "none" for the anchor tag, the second alert will display "block" for the paragraph element, and the third alert will display "none" after the intentional display setting. This accurately reflects the computed display styles of the elements.

Alternative Approach: Class Toggling

Instead of relying on the display property, you could consider using class names to toggle the visibility of elements. By separating the presentation from the logic, you can simplify your code and make it less prone to style-related issues.

The above is the detailed content of How to Accurately Retrieve the Display Property of a DOM Element and Why the .style Property May Return Empty Strings. For more information, please follow other related articles on the PHP Chinese website!