javascript - JS无法更改className

Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
            
                    
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                        
                        2年前关闭。
                    
                
        

我正在尝试更新div＃programmation的第一个孩子的班级

<div id="programmationEtat">
   <div class="tab-pane ng-scope">...</div>
   <div class="tab-pane ng-scope">...</div>
   <div class="tab-pane ng-scope">...</div>
   ...
</div>

我尝试过：

var children = document.getElementById("programmationEtat").children;
console.log(children);
children[0].className = 'active';
console.log(children);

第一个控制台日志显示：


  平板显示器


第二个说：


  活性


但是没有任何变化，当我查看HTML（chrome调试器）时，我仍然有

<div class="tab-pane ng-scope">

我究竟做错了什么 ？！
先感谢您 ！

编辑：
我发现了问题：
我在包含此div的作用域上使用了动态指令：

   app.directive('dynamic', ['$compile', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function (html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
}]);

我有

$scope.programmation='...<div id="programmationEtat">
       <div class="tab-pane ng-scope">...</div>
       <div class="tab-pane ng-scope">...</div>
       <div class="tab-pane ng-scope">...</div>
       ...
    </div>...'

HTML：

<div dynamic="programmation" id="programmationEtat">
    ...
</div>

看起来用document.getElementById（...）进行更新对于$ scope.programmation中包含的内容是不可能的，必须直接在$ scope.programmation上进行更新。

为了解决我的问题，我使用了替换功能（$ scope.programmation.replace（...））！

最佳答案

使用ng-class：

<div id="programmationEtat">
   <div ng-class="className"class="tab-pane ng-scope">...</div>
   <div class="tab-pane ng-scope">...</div>
   <div class="tab-pane ng-scope">...</div>
</div>

$scope.className = 'active';

要么：

<div id="programmationEtat">
   <div ng-class="{ 'active': activated }"class="tab-pane ng-scope">...</div>
   <div class="tab-pane ng-scope">...</div>
   <div class="tab-pane ng-scope">...</div>
</div>

$scope.activated = true;