Javascript 未捕获类型错误：无法设置#<；的属性offsetWidth；HTMLElement>；它只有一个getter

我正在用AngularJS开发一个web应用程序。我有一个不知从哪里冒出来的错误，它工作得很好，我真的不知道为什么它不再工作了

在指令中，我尝试在指令html模板中设置元素的属性

offsetWidth

。因为我真的不知道它是从哪里来的，所以我会给你我的指令和模板的完整代码。该指令创建应用程序按钮，并在单击时处理其视觉效果。这是行

$element[0]。offsetWidth=$element[0]。offsetWidth这会触发错误。（这是一个重新启动动画的技巧）

我再重复一遍，这段代码运行得很好，我几乎可以肯定我没有做任何更改。我在用Chrome进行调试，也许是因为它

错误：
uncaughttypeerror:无法设置属性offsetWidth of，它只有一个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>


我猜你最近更新了Chrome 43。我只是遇到了同样的问题。看起来最新版本将dom节点更像标准的js类，任何只读属性现在都会抛出js错误。设置offsetWidth无论如何都不会起作用，因为它是一个只读属性，但之前Chrome会默默地忽略它，而现在如果使用严格模式，它会抛出此错误。请参阅这里的细节：
 < P>如果在您的用例中投掷临时创可贴是可接受的，您可以使用下面描述的技术来抑制错误消息：

在库中的任何.js文件中，搜索
“use strict”
，并注释掉包含这一行的行。例如，在第39行的文件
jquery-1.9.1.js
中，有一行是：

"use strict";

我成功了

//"use strict";

我发现
“使用严格”的地方都这样做了

编辑：

仅仅隐藏错误实际上并不能解决问题，还可能隐藏其他问题。正如在另一个回答中提到的，从Chrome 43开始，如果您尝试写入只读DOM属性，则无论您是否在代码中显式使用“use strict”，都会出现错误。总之，不要写入只读DOM属性…
根据需要，只需访问该属性即可触发回流。

因此，这应该足以重置动画：

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

我已经在chromium和firefox上做了快速测试，这两个工具都可以使用。
修复问题并避免jshint错误（需要赋值或函数调用）
你应该做：

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

顺便问一下，下面的答案怎么会是
/“严格使用”可以渗透到？
这是这个网站的一个很好的例子。假问题。假答案。假交通。非常悲哀的事情。
如果我只得到offsetWidth值，那么重启动画技巧仍然有效（$element[0].offsetWidth；），所以我的问题得到了解决。但是我仍然想知道为什么我不能为offsetWidth属性设置一个值？如果你删除“use strict”，你会隐藏错误而不是修复错误，我认为这是一种不好的做法。