覆盖动态创建的元素的内部样式表

Question

我有一个angularjs组件，第三方库在组件的html文件中创建canvas。 以下是第三方库在页面加载时创建的canvas。

<canvas style="width: 410px; height: 450px;"></canvas> 

我目前的解决方案是，我在CSS回调方法中设置更改$postLink以下方式。

var elem= angular.element(document.querySelector('#fooSelector canvas'));    
elem.css('width', '420px');

但我在某处更改CSS并在DOM angularjs内操纵controller并不是一个好习惯。

那么如何更改由某个第三方库动态创建的元素inline CSS

Answer 1

  

更改CSS并在angularjs控制器内操作DOM不是一个   好的做法

这对初学者来说只是一个常见的陈述，这并不意味着你不能或你不应该 - 这意味着如果有更好更简单的方法你就不应该这样做。

当你创建主要目的是包装像canvas这样的东西的组件时，改变它的位置，宽度等等是绝对正常的。

虽然使用查询选择器并不好 - 假设您在页面上有2个这样的组件，那么您将始终选择第一个画布。所以最好使用$ element.find：

$element.find('canvas').css('width', '420px');