如图，我设置的CSS样式为#goods img，如果我想通过js来对它进行修改，应该如何弄，我用的是原生js？

Posted 2023-03-30

例如一个CSS为#goods 我就可以用document.getElementById("goods")来获取他;

也要先获取它 也可以给它设置ID 或者通过先获取goods再获取它下边的img
var img =goods.getELementsByTagName("img"); 这里会获取到一个数组 如果只有一个就加下标[0]，如果是多个就用for循环挨个设置，案例呢：img.style.backgroundColor ="#fff"注意style某些样式后边要把杠换成驼峰 大小写 具体的你再查吧 js获取元素和js设置CSS 参考技术A <script>
document.querySelector("#goods").style.width= "100px";
</script>

如何为 [ngStyle] 设置动态 CSS 样式

【中文标题】如何为 [ngStyle] 设置动态 CSS 样式

【英文标题】：how to set dynamic css style for [ngStyle]

【发布时间】：2017-07-16 23:42:36

【问题描述】：

我正在寻找为 [ngStyle] 设置动态 css 从我的组件 ms-toolbar 我已将 html 设置为

<md-toolbar class="ms-toolbar" [ngStyle]="StylingToolbar">
</md-toolbar>

我已经从 ts 初始化为

    export class AppbarComponent 
     StylingToolbar = 
    'background-color': '00bcd4',
    'color':'white'
  ;

但是在渲染时它不起作用。渲染时将元素设置为

<md-toolbar _ngcontent-alm-42="" class="ms-toolbar" ng-reflect-ng-style="[object Object]">

我使用的是 Angular 2.3.1 版

请建议一些更好的方法来做到这一点。

【问题讨论】：

Dynamically updating css in Angular 2的可能重复

我想要什么设置对象，该对象具有 ts 文件中的 css 属性，正如我所描述的那样，称为 [ngStyle]

【参考方案1】：

你所做的只是检查你的目标代码

色码前需加#

使用下面的代码

export class AppbarComponent 
     StylingToolbar = 
    'background-color': '#00bcd4',
    'color':'white'
  ;