时间戳

首页 > 解决方案 > 覆盖动态创建的元素的内部样式表

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

问题描述

我有一个angularjs组件，第三方库canvas在组件的 html 文件内部创建。以下是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由某些第三方库动态创建的元素

标签： javascriptcssangularjs

解决方案

在 angularjs 控制器中更改 CSS 和操作 DOM 不是一个好习惯

这只是初学者的常见说法，这并不意味着你不能或你不应该 - 这意味着如果有更好和更简单的方法你不应该。

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

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

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

推荐阅读