Altering value of CSS property with calculated variable via JavaScript

Question

I'm trying to set a value of a css property with a calculated variable value.

I have two classes .v-table__overflow and .v-datatable__actions. I want to get the width value of .v-table__overflow and set this value in .v-datatable__actions as the value of width of this class.

I'm getting this error:

Uncaught TypeError: Cannot read property 'setProperty' of undefined

var dtoverflow = document.querySelector('.v-table__overflow')
const style4 =  getComputedStyle(dtoverflow);
var dtoverflowWidth = style4.width 

var dtActions = document.querySelector('.v-datatable__actions') 
const style5 =  getComputedStyle(dtActions); 
var dtActionsWidth = style5.width;

dtActionsWidth.style.setProperty('width', '--dtoverflowWidth');

It looks like dtActionsWidth is the width value from the computed styles of dtActions. The variable dtActionsWidth has no style property. Maybe you want dtActions.style.setProperty(...)? — showdev
– showdev, Commented Jun 26, 2019 at 5:30

Nidhin Joseph · Accepted Answer · 2019-06-26 05:49:04Z

1

Try this way

var dtoverflow = document.querySelector('.v-table__overflow')
var dtoverflowWidth = getComputedStyle(dtoverflow).width;

var dtActions = document.querySelector('.v-datatable__actions') 
var dtActionsWidth = getComputedStyle(dtActions).width;

dtActions.style.width = dtoverflowWidth;

You also had a typo with using dtActionsWidth instead of dtActions in the last line which threw the error.

edited Jun 26, 2019 at 5:49

answered Jun 26, 2019 at 5:47

Nidhin Joseph

10.3k4 gold badges28 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nidhin Joseph Over a year ago

@showdev The code had a typo with using dtActionsWidth instead of dtActions in the last line which threw the error.

Collectives™ on Stack Overflow

Altering value of CSS property with calculated variable via JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related