javascript - 未捕获的类型错误 : Cannot set property offsetWidth of# which has only a getter

Question

我正在使用 AngularJS 开发网络应用程序。我有一个不知从何而来的错误，它工作正常，但我真的不知道为什么它不再工作了。

所以它在指令中，我尝试设置属性 offsetWidth指令 html 模板中的一个元素。因为我真的不知道它可能来自哪里，所以我会给你我的指令和模板的完整代码。该指令创建一个应用程序按钮并处理其点击时的视觉效果。这是行 $element[0].offsetWidth = $element[0].offsetWidth;这会触发错误。 (这是重启动画的技巧)

我再说一遍，这段代码工作正常而且我几乎可以肯定我没有做任何更改。我正在使用 Chrome 进行调试，也许它来自于它？

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

指令:

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

模板:

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

Answer 1

我猜你最近更新到 Chrome 43。我刚刚遇到了同样的问题。看起来最新版本将 dom 节点更像标准的 js 类，任何只读的属性现在都会抛出 js 错误。设置 offsetWidth 无论如何都不会起作用，因为它是一个只读属性，但以前 Chrome 会默默地忽略它，而现在如果你使用严格模式，它会抛出这个错误。详情请看这里:http://updates.html5rocks.com/2015/04/DOM-attributes-now-on-the-prototype