The values in my JavaScript don't correspond to the values in my CSS

Question

The values in my JavaScript don't correspond to the values in my CSS

Is it possible to retrieve the display value (display:none; or display:block;) of a div with the ID "navmenu" using JavaScript? I have encountered an issue where I can successfully read the style values when they are set within the same HTML file, but not when they are defined in an external CSS file.

Here is the code snippet:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
    <div id="navmenu">
<p>This is a box of 250px * 250px</p> 
</div><!--navmenu-->
<!------------------------------------------------------------------->
<script>
function display(elem) {
  return elem.style.display;
}
alert(display(document.getElementById('navmenu')));
</script>
<!------------------------------------------------------------------->
</body>
</html>

And here is the CSS:

#navmenu {
    display:block;
    width:250px;
    height:250px;
    background-color:#3CC;
}

javascript html css

Answer 1

Answer №1

When using the elem.style.display property, keep in mind that it only reflects a display property directly set on the DOM object and does not consider inherited styles from style sheets.

To obtain a style value that includes those from a style sheet, you can utilize the window.getComputedStyle() method.

function showDisplayValue(elem) {
    return getComputedStyle(elem, null).getPropertyValue("display");
}

Answer 2

When using the elem.style.display property, keep in mind that it only reflects a display property directly set on the DOM object and does not consider inherited styles from style sheets.

To obtain a style value that includes those from a style sheet, you can utilize the window.getComputedStyle() method.

function showDisplayValue(elem) {
    return getComputedStyle(elem, null).getPropertyValue("display");
}

Answer 3

Answer №2

To utilize the getComputedStyle() method, follow this code snippet:

function checkDisplay(element) {
  return window.getComputedStyle(element).display;
}
alert(checkDisplay(document.getElementById("sidebar")));

<div id="sidebar">
  <p>This is a sidebar with a width of 300px.</p>
</div>
<!--sidebar-->

Answer 4

To utilize the getComputedStyle() method, follow this code snippet:

function checkDisplay(element) {
  return window.getComputedStyle(element).display;
}
alert(checkDisplay(document.getElementById("sidebar")));

<div id="sidebar">
  <p>This is a sidebar with a width of 300px.</p>
</div>
<!--sidebar-->

Answer 5

Answer №3

Here is a handy function you can use to easily query the display style of any element using the getComputedStyle method. This function simplifies the process and also caches the computed style object for efficiency.

function getStyle(query) {
  var elem = document.querySelector(query),
      cs = window.getComputedStyle(elem,null);
  return {
     get : function(prop) {
        return cs.getPropertyValue(prop);
     }
  }
}

To use this function, simply provide a CSS selector for the element you want to query. For instance, if you have an element with ID "navmenu", you can query it like this:

var s = getStyle( "#navmenu" );

s.get("display");
s.get("color"); // etc...

This function works in IE9 and above.

Answer 6

Here is a handy function you can use to easily query the display style of any element using the getComputedStyle method. This function simplifies the process and also caches the computed style object for efficiency.

function getStyle(query) {
  var elem = document.querySelector(query),
      cs = window.getComputedStyle(elem,null);
  return {
     get : function(prop) {
        return cs.getPropertyValue(prop);
     }
  }
}

To use this function, simply provide a CSS selector for the element you want to query. For instance, if you have an element with ID "navmenu", you can query it like this:

var s = getStyle( "#navmenu" );

s.get("display");
s.get("color"); // etc...

This function works in IE9 and above.

Answer 7

Answer №4

When you access the HTMLElement.style property, you are actually getting a CSSStyleDeclaration object that specifically represents the style attribute of the element. For a comprehensive list of CSS properties that can be accessed through style, refer to the CSS Properties Reference.

It's important to note that using the style property alone may not provide a full picture of an element's style, as it only reflects the CSS declarations set within the element's inline style attribute. It does not capture styles applied from external sources like style rules in the head section or external style sheets. To retrieve all CSS property values for an element, it is recommended to utilize window.getComputedStyle() instead.

Source

The solution lies in using window.getComputedStyle() instead.

Answer 8

When you access the HTMLElement.style property, you are actually getting a CSSStyleDeclaration object that specifically represents the style attribute of the element. For a comprehensive list of CSS properties that can be accessed through style, refer to the CSS Properties Reference.

It's important to note that using the style property alone may not provide a full picture of an element's style, as it only reflects the CSS declarations set within the element's inline style attribute. It does not capture styles applied from external sources like style rules in the head section or external style sheets. To retrieve all CSS property values for an element, it is recommended to utilize window.getComputedStyle() instead.

Source

The solution lies in using window.getComputedStyle() instead.

The values in my JavaScript don't correspond to the values in my CSS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Transferring multiple data between PHP and JavaScript

Customizing SVGs for Ion Icons Version 5 in a React Application

showing information on webpage 2 received via query parameters from webpage 1

Activate Gulp watcher to execute functions for individual files

Tips for adjusting image and div sizes dynamically according to the window size

Performing asynchronous operations in React with axios using loops

Setting up React Native on a Mac M1 device

Unusual marking on the navigation bar

The issue with the Angular custom checkbox directive arises when using it within an ng-repeat

Is there a way to dynamically enable ui-sref through element.append in Angular?

Unlocking the Power of Observable Objects with Knockout.js

Utilizing both a named function and an arrow function as event handlers in React

Seeking a template for a server-side programmer who lacks proficiency in CSS and design?

React Redux Loading progress bar for seamless navigation within React Router

Does an href and click events both happen simultaneously?

Retrieving complete credit card information with the help of JavaScript

Trigger JavaScript function once all Ajax requests have completed

Node.js offers a simple and efficient way to retrieve screen resolution. By using

Can someone guide me on the process of adding a personalized emoji to my discord bot?

Express middleware for handling errors with Node.js router