Uncaught TypeError: Cannot set property offsetWidth of # which has only a getter

Question

I'm developing a web app with AngularJS. I had an error which appeared from nowhere, it was working fine and I really don't know why it doesn't work anymore.

So it's in a directive, I try to set property offsetWidth of an element in the directive html template. Since I really don't know where it could come from, I'll give you full code of my directive and template. The directive creates an app button and handles its visual effect on click. It's the line $element[0].offsetWidth = $element[0].offsetWidth; which triggers the error. (It's a trick to restart animation)

I repeat again, this code was working fine and I'm almost sure I didn't make any changes. I'm using Chrome to debug, maybe it comes from it ?

Error: Uncaught TypeError: Cannot set property offsetWidth of #<HTMLElement> which has only a getter

Directive:

'use strict';

XVMApp.directive('appButton', ['$location', function($location){
    return {
        restrict: 'E',
        replace: true,
        scope: {
            img: '@',
            fillPercent: '@?',
            target: '@?'
        },
        link: function ($scope, $element) {

            // Image percentage fill button
            if($scope.fillPercent === undefined) $scope.fillPercent = '100';

            // Click event
            $element.on('click', function() {

                // Url target
                if($scope.target !== undefined){
                    $scope.$apply(function() {
                        $location.path($scope.target);
                    });
                }

                // Click effect
                $element[0].preventDefault;
                $element[0].classList.remove('app-button-click-effect');
                $element[0].offsetWidth = $element[0].offsetWidth;
                $element[0].classList.add('app-button-click-effect');

            });

        },
        templateUrl: 'src/directive/appButton/app-button.html'
    };
}]);

Template:

<div class="app-button"
     style="background-size: {{fillPercent}}%; ">
        <div style="
            background-image: url('src/assets/img/{{img}}');
            background-repeat: no-repeat;
            background-position: center;
            background-size: {{fillPercent}}%;
            height: 100%;
            width: 100%; ">
        </div>
</div>

If I only get offsetWidth value the restart animation trick works anyway ($element[0].offsetWidth;), so my problem is fixed. But I'm still wondering why I can't set a value to offsetWidth property ? — sylvain1264, May 26 '15 at 10:37

score 7 · Accepted Answer · answered May 26 '15 at 11:39

I'm guessing you've recently updated to Chrome 43. I just encountered the same issue. Looks like the latest version treats dom nodes more like standard js classes, and any properties that are read only will now throw a js error. Setting the offsetWidth would never have been working anyway as it's a read only property, but previously Chrome would have just silently ignored it, whereas now if you're using strict mode it's throwing this error. See here for details: http://updates.html5rocks.com/2015/04/DOM-attributes-now-on-the-prototype

score 6 · Answer 2 · edited May 23 '17 at 12:01

6

According to this answer you just need to access the property to trigger a reflow.
So this should be enough to reset your animation :

$element[0].classList.remove('app-button-click-effect');
$element[0].offsetWidth;
$element[0].classList.add('app-button-click-effect');

I've done quick tests on chromium and firefox and both works.

edited May 23 '17 at 12:01

Community

1
1

answered Oct 02 '15 at 13:09

Ghetolay

3,222
2
30
29

score 1 · Answer 3 · edited Jan 20 '16 at 11:06

If in your use case throwing a temporary band-aid would be acceptable, you could just suppress the error message using the technique described next:

In any .js file in the library, search for "use strict", and comment the line out that has this this line. For example, in the file jquery-1.9.1.js on line 39, there is a line which is:

"use strict";

I made it

//"use strict";

I did this everywhere I found "use strict";

Edit:

Simply hiding the error will not actually fix the problem, and may hide additional problems as well. As mentioned in a different answer, as of Chrome 43, an error will be raised if you try to write to read-only DOM properties regardless of whether or not you are explicitly using "use strict" in your code. In summary, don't write to read-only DOM properties...

If you remove "use strict", you hide errors instead of fixing them, I think it's bad practice. — sylvain1264, Nov 07 '15 at 18:40

shimanskybiz · Answer 4 · 2018-11-02T20:35:22.497

To fix the problem and to avoid jshint error (expected an assignment or a function call) You should do:

$element[0].classList.remove('app-button-click-effect');
(function(){  
  return $element[0].offsetWidth;
})();
$element[0].classList.add('app-button-click-effect');

BTW How come answers like below //"use strict"; could penetrate into? This is a good example of what this site is about. Fake questions. Fake answers. Fake traffic. Very sad thing.

score 0 · Answer 5 · answered Mar 23 '22 at 20:45

0

If you just want to set the offsetWidth just do:

$element[0].style.offsetWidth = $element[0].offsetWidth

Instead of:

$element[0].offsetWidth = $element[0].offsetWidth;

Which is only a getter property.

answered Mar 23 '22 at 20:45

yogesh dhiman

49
4

Uncaught TypeError: Cannot set property offsetWidth of # which has only a getter

5 Answers5