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

Question

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

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

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

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

但我在某处读到更改 CSS 和在 angularjs controller 中操作 DOM 不是一个好习惯。

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

Answer 1

changing CSS and Manipulating DOM inside angularjs controller is not a good practice

这只是对初学者的通用陈述，这并不意味着你不能或你不应该 - 这意味着如果有更好更简单的方法你不应该。

当您创建主要目的是包裹 Canvas 之类的组件时，更改其位置、宽度或其他任何内容是绝对正常的。

尽管使用查询选择器并不好——假设您在页面上有 2 个这样的组件，那么您将始终选择第一个 Canvas 。所以最好使用 $element.find:

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