通过JavaScript使用计算的变量更改CSS属性的值

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');

Answer 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.