Uncaught TypeError：無法設置屬性偏移量＃<HTMLElement>其中只有一個getter

我正在開發一個Web應用程序與AngularJS。我有一個從無處出現的錯誤，工作正常，我真的不知道爲什麼它不工作了。Uncaught TypeError：無法設置屬性偏移量＃<HTMLElement>其中只有一個getter

所以它在一個指令中，我嘗試在指令html模板中設置一個元素的屬性offsetWidth。由於我真的不知道它可能來自哪裏，我會給你完整的指令和模板代碼。該指令創建一個應用程序按鈕，並在點擊時處理其視覺效果。這是觸發錯誤的行$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>

來源

2015-05-26 sylvain1264

如果我只獲得offsetWidth值，重新啓動動畫技巧仍然有效（$ element [0] .offsetWidth;），所以我的問題得到了解決。但我仍然想知道爲什麼我不能設置一個值爲offsetWidth屬性？ – sylvain1264

我猜你最近已經更新到Chrome瀏覽器43.我只是遇到了同樣的問題。看起來最新版本將dom節點更像標準js類，任何只讀屬性現在都會拋出一個js錯誤。設置offsetWidth將永遠不會工作，因爲它是一個只讀屬性，但以前的Chrome會默默地忽略它，而現在如果你使用嚴格模式，它會拋出這個錯誤。看到這裏的細節：

在任何.js文件庫：http://updates.html5rocks.com/2015/04/DOM-attributes-now-on-the-prototype

來源

2015-05-26 11:39:50

如果你使用的情況下拋出一個臨時的權宜之計是可以接受的，你可以只用下面描述的技術取消錯誤信息，搜索"use strict"，然後評論這條線。例如，第39行上的文件jquery-1.9.1.js中，有一行是：

"use strict";

我把它

//"use strict";

我這樣做，我到處都發現"use strict";

編輯：

只是隱藏錯誤並不會真正解決問題，並且可能會隱藏其他問題。正如一個不同的答案中提到的那樣，從Chrome 43開始，如果您嘗試寫入只讀DOM屬性，則會引發錯誤，無論您是否在代碼中明確使用「use strict」。總之，不要寫只讀的DOM屬性...

來源

2015-07-06 20:42:09 user5086937

如果你刪除「嚴格使用」，你會隱藏錯誤而不是修復錯誤，我認爲這是不好的做法。 – sylvain1264

根據this answer你只需要訪問屬性觸發迴流。
所以這應該是足夠的重置動畫：

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

我已經做了鉻和Firefox和作品都快速測試。

來源

2015-10-02 13:09:22 Ghetolay

Uncaught TypeError：無法設置屬性偏移量＃<HTMLElement>其中只有一個getter

回答

相關問題