Exploring the world of CSS: accessing style attributes using JavaScript

Question

Exploring the world of CSS: accessing style attributes using JavaScript

So I created a basic HTML file with a div and linked it to a CSS file for styling:

HTML :

<html>
<head>
    <title>Simple Movement</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script src="index.js"></script>
</head>

<body>
    <div id="square"></div>
</body>
</html>

CSS:

body {
    margin: 0;
}

#square {
    width: 100px;
    height: 100px;
    border: 1px solid #095057;
    background-color: #20979e;
    position: absolute;
    left: 200px;
    top: 200px;
}

In my JavaScript file, I have a log statement like this:

console.log(document.getElementById('square').style.top)

But unfortunately, I am encountering an error message:

   Uncaught TypeError: Cannot read properties of null (reading 'style')
at index.js:1

I am puzzled as to why it is saying that the style property is null. Any ideas?

javascript html css

Answer 1

Answer №1

I'm not sure why it's showing that the style is null. Do you have any ideas?

Actually, it's not about the style being null. The issue lies in the fact that

document.getElementById('square')

is returning null, so when you try to access the property style on null, it results in an error.

This problem occurs because your script is being loaded and executed in the head section. At this point, the element with the ID "square" doesn't exist in the DOM yet.

To resolve this, you can either move your script below the relevant element (check the snippet) or use async defer like this:

<script src="index.js" async defer></script>

to ensure that it loads and executes after the DOM parsing is complete.

Additionally, keep in mind that accessing the style will only give you inline styles from the style attribute and won't include values from external stylesheet files or inline stylesheets. If you need all the computed styles, consider using computedStyleMap() (refer to https://developer.mozilla.org/en-US/docs/Web/API/Element/computedStyleMap).

body {
  margin: 0;
}

#square {
  width: 100px;
  height: 100px;
  border: 1px solid #095057;
  background-color: #20979e;
  position: absolute;
  left: 200px;
  top: 200px;
}

<html>

<head>
  <title>Simple Movement</title>
  <meta charset="UTF-8">
</head>

<body>
  <div id="square"></div>
  
  <script>
    console.log(document.getElementById('square').computedStyleMap().get('top').value);
  </script>
</body>



</html>

Answer 2

I'm not sure why it's showing that the style is null. Do you have any ideas?

Actually, it's not about the style being null. The issue lies in the fact that

document.getElementById('square')

is returning null, so when you try to access the property style on null, it results in an error.

This problem occurs because your script is being loaded and executed in the head section. At this point, the element with the ID "square" doesn't exist in the DOM yet.

To resolve this, you can either move your script below the relevant element (check the snippet) or use async defer like this:

<script src="index.js" async defer></script>

to ensure that it loads and executes after the DOM parsing is complete.

Additionally, keep in mind that accessing the style will only give you inline styles from the style attribute and won't include values from external stylesheet files or inline stylesheets. If you need all the computed styles, consider using computedStyleMap() (refer to https://developer.mozilla.org/en-US/docs/Web/API/Element/computedStyleMap).

body {
  margin: 0;
}

#square {
  width: 100px;
  height: 100px;
  border: 1px solid #095057;
  background-color: #20979e;
  position: absolute;
  left: 200px;
  top: 200px;
}

<html>

<head>
  <title>Simple Movement</title>
  <meta charset="UTF-8">
</head>

<body>
  <div id="square"></div>
  
  <script>
    console.log(document.getElementById('square').computedStyleMap().get('top').value);
  </script>
</body>



</html>

Exploring the world of CSS: accessing style attributes using JavaScript

Answer №1

Similar questions

Error encountered while executing ExpressJs function that was converted to a promise

What is the best way to pass information between Express middleware and endpoints?

Ensuring the Selection with jQuery

Real-time JQuery search with instant results

Using jQuery to dynamically insert an HTML element into a table

Tips for integrating highcharts plugins with highcharts-vue (highcharts vue wrapper)

If the given response `resp` can be parsed as JSON, then the function `$

Various options can be chosen to alter the margin

Trouble with HR functionality in Outlook email

Can anyone recommend an easy regular expression to validate date format patterns?

Connect radio input's value to object's key within AngularJS

Text positioned on the right side of the image, appearing to hover above

The CSS styles can vary depending on the web browser being used

Waiting for the listener script to finish its task in an Ajax call and then informing the user

Tips for altering promises within nested for loops?

Preserving spacing using minimum widths

Changing the color of a div while implementing a show and hide effect in JavaScript

Ways to expand the capabilities of Google Analytics for tracking AJAX requests and more, as recommended by the H5BP documentation

Avoiding errors caused by higher order array methods

Hovering over a td tag and adding a border using CSS can cause the entire table to