Search code examples
javascriptinternet-explorerecmascript-5

Setting width in ie11/Edge on element - assignment to read-only properties is not allowed in strict mode


I am selecting an element that I need to change the size of the element based on certain rules all works fine in major browsers but in ie11/Edge it does not work.

this.visContainer = this.$element[0].querySelector('.am-visualization-render-area__vis-container');

Here is where it goes wrong I'm trying to set a value to a read-only property

 const visContainerBounds = this.visContainer.getBoundingClientRect();
 visContainerBounds.width -= this.marginHorizontal;
 visContainerBounds.height -= this.marginVertical;

This returns the error

assignment to read-only properties is not allowed in strict mode

I have also tried

this.visContainer.clientWidth -= this.marginHorizontal;
this.visContainer.clientHeight -= this.marginVertical;
const visContainerBounds = this.visContainer.getBoundingClientRect();

Now from my findings, this is caused by ie and edge following the ECMAScript5 standard and chrome ff safari aren't in this case.

My question is how can I set the value of the width of the element without this error throwing? Any help is appreciated.


Solution

  • Can't you set the style directly; like:

    this.visContainer.style.width="100px";