document.querySelector() 未应用样式

Question

谁能指出我的错误

<p ng-controller="demo" class='bgColor'>
  This is dummy content
</p>

angular.module("app", [])

  .controller("demo", function($scope) {
    $scope.p = document.querySelector('.bgColor');

    var styles = {
      'background-color': 'red'
    };
    Object.assign($scope.p.style, styles);
  });

我正在尝试修改 class 和属性但实际上我收到了 TypeError: Cannot read 属性 'style' of null 在我的 Angular.js 1.x 应用程序中。但是当在 fiddle 中尝试时，我看不到错误，但也没有应用样式。

谢谢大家

Answer 1

您似乎没有在正确的时间访问该元素。这就是它说“空”的原因。

var p = document.querySelector('.bgColor');
var styles = {
      'background-color': 'red'
    };
console.dir(p);
Object.assign(p.style, styles);

在 chrome 中，将此代码放在控制器部分之后对我有用。

Answer 2

请参阅以下工作片段。还要记住 AngularJS documentation 不鼓励使用控制器来操纵 DOM。

angular.module("app", [])

  .controller("demo", function($scope) {
    $scope.p = document.querySelector('.bgColor');

    Object.assign($scope.p.style, {
      'background-color': 'red'
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<p ng-app="app" ng-controller="demo" class="bgColor">
  This is dummy content
</p>

document.querySelector() 未应用样式

document.querySelector() is not applying style

javascript

css

angularjs