Fatal编程技术网

Javascript 保存角元素的CSS

javascript css angularjs

Javascript 保存角元素的CSS,javascript,css,angularjs,angularjs-directive,mouseevent,Javascript,Css,Angularjs,Angularjs Directive,Mouseevent,我试图在鼠标悬停期间使用自定义指令更改元素的CSS（仅供练习！）： 有人能告诉我如何正确保存和重新分配元素的CSS吗？有什么理由不使用ng style或ng class来代替吗？@Daniel\u L练习角度指令。你不必解析CSS规则。在css文件中包含您想要的所有规则，并使用ng class非常轻松地切换样式。我知道有更简单的方法可以做到这一点，但我只想这样做（出于学习目的）。那么为什么不将指令中的样式声明指定给ctrl.style='color:red；'然后在控制器中使用ng style附

我试图在鼠标悬停期间使用自定义指令更改元素的CSS（仅供练习！）：

有人能告诉我如何正确保存和重新分配元素的CSS吗？

有什么理由不使用
ng style
或
ng class
来代替吗？@Daniel\u L练习角度指令。你不必解析CSS规则。在css文件中包含您想要的所有规则，并使用
ng class
非常轻松地切换样式。我知道有更简单的方法可以做到这一点，但我只想这样做（出于学习目的）。那么为什么不将指令中的样式声明指定给
ctrl.style='color:red；'
然后在控制器中使用
ng style
附加该命令。有没有理由不使用
ng style
或
ng class
来代替它？@Daniel_L用于角度指令的练习。你不必解析css规则。在css文件中包含您想要的所有规则，并使用
ng class
非常轻松地切换样式。我知道有更简单的方法可以做到这一点，但我只想这样做（出于学习目的）。那么为什么不将指令中的样式声明指定给
ctrl.style='color:red；'
然后在控制器中使用
ng样式添加

<!DOCTYPE html>
<html ng-app="m1">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  </head>
  <body>
    <table>
      <tr custom-tr>
        <td>Hello</td>
      </tr>
      <tr custom-tr>
        <td>Hi</td>
      </tr>
      <tr custom-tr>
        <td>Bye</td>
      </tr>
    </table>
  </body>
  <script>
    var m1 = angular.module("m1", []);

    m1.directive('customTr', function()
    {
      var d={};
      d.restrict = 'A';
      var oldStyle = null;
      var newStyle = {'color': 'red'};
      d.link = function(scope, element, attr)
      {
        if (!oldStyle)
        {
          oldStyle = element[0].style;
        }
        element.bind('mouseenter', function(){
          element.css(newStyle);
        });
        element.bind('mouseleave', function(){
          element.css(oldStyle);
        });
      }
      return d;
    });
  </script>
</html>



Uncaught TypeError: Cannot assign to read only property 'length' of object '#<CSSStyleDeclaration>'