Replace the element's style using a JavaScript object

Question

Replace the element's style using a JavaScript object

While there are numerous versions of this query, the existing answers fail to provide in-depth analysis.

Query: How does this result in a height of 200 pixels?

Consider the following code snippet:

var el = document.querySelector('#r');

console.log('First:: ' + el.offsetHeight);

el.style = {
  height: el.offsetHeight + 500 + 'px'
}

console.log('Second:: ' + el.offsetHeight);

<div id="r" style="height:200px;width:800px;overflow:auto;border:1px    solid;margin:20px;box-sizing:border-box"></div>

I suspect el.style is read-only, leading me to anticipate that setting an object will fail silently, resulting in an output of:

First:: 200, Second:: 200

However, the actual outputs are:

First:: 200, Second:: 0

Why is this the case?

Query: Why does using Object.assign to set el.style work?

Object.assign(el.style,{
   height : el.offsetHeight + 500 
})

Could someone offer a more detailed explanation?

javascript html css dom

Answer 1

Answer №1

Regarding your initial inquiry:

MDN mentions that while the style object is typically read-only, Firefox, Chrome, and Opera allow modifications to it (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style). However, the offsetHeight property itself is readonly (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight), leading to a scenario where setting the style attribute may inadvertently reset this value to zero. Since offsetHeight is a calculated attribute rather than an explicitly set one, the browser's interpretation of modifying the style leads to this unexpected outcome.

In response to your second question:

The functionality of Object.assign is explained directly in its documentation. It does not replace the entire object; instead, it replaces the enumerable own properties of the object being targeted. This distinction is outlined clearly in the official documentation for Object.assign: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

"Properties in the target object will be overwritten by properties in the sources if they have the same key. Later sources' properties will similarly overwrite earlier ones.

The Object.assign() method only copies enumerable and own properties from a source object to a target object."

Therefore, in your initial coding attempt:

el.style = {
  height: el.offsetHeight + 500 + 'px'
}

You were trying to replace the entire object, resulting in failure. On the other hand, Object.assign simply copies properties, allowing for a successful operation.

Answer 2

Regarding your initial inquiry:

MDN mentions that while the style object is typically read-only, Firefox, Chrome, and Opera allow modifications to it (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style). However, the offsetHeight property itself is readonly (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight), leading to a scenario where setting the style attribute may inadvertently reset this value to zero. Since offsetHeight is a calculated attribute rather than an explicitly set one, the browser's interpretation of modifying the style leads to this unexpected outcome.

In response to your second question:

The functionality of Object.assign is explained directly in its documentation. It does not replace the entire object; instead, it replaces the enumerable own properties of the object being targeted. This distinction is outlined clearly in the official documentation for Object.assign: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

"Properties in the target object will be overwritten by properties in the sources if they have the same key. Later sources' properties will similarly overwrite earlier ones.

The Object.assign() method only copies enumerable and own properties from a source object to a target object."

Therefore, in your initial coding attempt:

el.style = {
  height: el.offsetHeight + 500 + 'px'
}

You were trying to replace the entire object, resulting in failure. On the other hand, Object.assign simply copies properties, allowing for a successful operation.

Answer 3

Answer №2

According to the information from the Chromium source at this link,

When a property is set, it is passed on to el.style.cssText as specified in the document found at this location.

The spec indicates [PutForwards=cssText]

Therefore, if we assign a string.,

el.style = 'some valid css string'; 
// it takes the string and assigns it to cssText 
el.style.cssText = 'some valid css string';

// When assigning an object
el.style = {...}; 
// it takes the object and converts it to a string using toString()
el.style.cssText = '[object Object]';
// Since it is not valid, it clears all styles

Answer 4

According to the information from the Chromium source at this link,

When a property is set, it is passed on to el.style.cssText as specified in the document found at this location.

The spec indicates [PutForwards=cssText]

Therefore, if we assign a string.,

el.style = 'some valid css string'; 
// it takes the string and assigns it to cssText 
el.style.cssText = 'some valid css string';

// When assigning an object
el.style = {...}; 
// it takes the object and converts it to a string using toString()
el.style.cssText = '[object Object]';
// Since it is not valid, it clears all styles

Answer 5

Answer №3

I decided to do some research because I had a list of style properties that needed changing and I wanted to find a cleaner way to do it using an object. For anyone else who may be curious about this topic, here's the solution I came up with:

var newStyles = { 
  zIndex: 10000,
  position: "absolute",
  top: newY,
  left: newX,
  opacity: 1,
  height: newHeight + "px",
  width: newWidth + "px"
}

for(let property of Object.keys(newStyles)){
  element.style[property.toString()] = newStyles[property.toString()];
}

Hope this helps!

Answer 6

I decided to do some research because I had a list of style properties that needed changing and I wanted to find a cleaner way to do it using an object. For anyone else who may be curious about this topic, here's the solution I came up with:

var newStyles = { 
  zIndex: 10000,
  position: "absolute",
  top: newY,
  left: newX,
  opacity: 1,
  height: newHeight + "px",
  width: newWidth + "px"
}

for(let property of Object.keys(newStyles)){
  element.style[property.toString()] = newStyles[property.toString()];
}

Hope this helps!

Answer 7

Answer №4

The problem lies in the following code snippet:

el.style = {
  height: el.offsetHeight + 500 + 'px'
};

This code not only fails to work as intended (the element's CSS height does not get set to

700px</code), but it also completely eliminates any inline styles that were previously applied to the element (in the <code>style

attribute):

https://i.sstatic.net/zr8C7.png

Additionally, since your <div> is empty, its height will default to zero. As a result, the value of el.offsetHeight ends up being 0.

Answer 8

The problem lies in the following code snippet:

el.style = {
  height: el.offsetHeight + 500 + 'px'
};

This code not only fails to work as intended (the element's CSS height does not get set to

700px</code), but it also completely eliminates any inline styles that were previously applied to the element (in the <code>style

attribute):

https://i.sstatic.net/zr8C7.png

Additionally, since your <div> is empty, its height will default to zero. As a result, the value of el.offsetHeight ends up being 0.

Replace the element's style using a JavaScript object

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Guide on properly formatting arithmetic expressions in a TextView for TalkBack recognition

I require the ability to execute a JavaScript or jQuery script within a PHP environment

Jquery: Pressing Enter will cause the input field to lose

I require the slideshow div to smoothly move elements down as it transitions between slides

What makes AJAX take so much time to load?

What are the methods for setting the width and height of an Angular mat dialog box?

Just sent out an email including an attachment with HTML content or a webpage link to access on Google

Working with iFrames through Splinter/Selenium in Python

Using JQuery to Customize Navigation Menu Targeting

Step-by-step guide on compressing a JavaScript array

Scroll sideways with AJAX content replacement

Struggling with transitioning from the Twitter search API to the status API

Does jqgrid navgrid have an event called "on Refresh"?

Is it possible to utilize AJAXToolKit and Jquery on a single webpage?

Activate the feature of smooth shading using Three.js

Retrieving the value of a basic object

Angular 4 scripts fail to execute after switching views

Why isn't the Vue component refreshing its view after the state changes in Vuex?

What is preventing this brief code from functioning properly? I am trying to extract a value from an input field and add it to a div element

Persist AJAX request across page reloads