document.querySelector() 没有应用样式答案

【问题标题】：document.querySelector() is not applying styledocument.querySelector() 没有应用样式
【发布时间】：2021-04-14 02:55:57
【问题描述】：

谁能指出我的错误

here?

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

我正在尝试修改属性的类，但实际上在我的 Angular.js 1.x 应用程序中得到 TypeError: Cannot read property 'style' of null。但是在尝试小提琴时，我看不到错误，但也没有应用样式。

谢谢大家

【问题讨论】：

如何在那里调试？如果我在控制器中写入 console.log，我看不到任何输出，也看不到任何警报（“foo”）。顺便提一句。这意味着您的 $scope.p 是 null 并且他没有找到任何元素。
您是否在使用某种 CSS 前/后处理？ SCSS，CSS模块？您的编译过程中是否涉及 Webpack 或类似的捆绑程序？正如@StefanRein 指出的那样，您的document.querySelector('.bgColor') 没有找到任何匹配的元素。
@ErnestoStifano 我们使用 less 来处理样式。顺便说一句，我的情况是我们正在维护通用的popmodal，在某些情况下我想减少弹出窗口的宽度。像上面提到的那样做太累了
@Mr.Learner，在这里工作plnkr.co/edit/QU4r05n9rQprwyL9Ltxh?preview .. 可能是代码中调用脚本的方式，
@ManirajMurugan 你能把它放在小提琴里吗..由于某种原因我无法访问我网络中的 plunker

标签： javascript css angularjs

【解决方案1】：

请看下面的工作 sn-p。另请记住，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>

【讨论】：

这太完美了..!!
顺便说一句，Object.assign($scope.p.style, { 'background-color': 'red' }); 和 Object.assign($scope.p.style, styles); 没什么区别
@Mr.Learner 理论上应该更高效。在实践中，什么都没有。只是想节省一些行。

【解决方案2】：

您似乎没有在正确的时间访问该元素。这就是为什么它说“null”。

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

将此代码放在控制器部分之后确实对我有用。

【讨论】：

Rei，你说得对，我在进入 Angular.Js $scope 模型之前尝试过同样的方法，但似乎只在 JS 中工作