Javascript 如何以编程方式向元素添加css规则

我用的是Angular 6和Typescript。这是我的问题。我需要向我正在编写的组件的主机添加一个特定的CSS规则。我无法系统地应用该规则，在添加规则之前，我需要在

ngOnInit（）

中有一些逻辑。我知道这听起来很糟糕，但没有解决办法，这是我唯一能解决我面临的问题的方法。我可以很容易地将新样式的类添加到主机中，但我似乎找不到添加规则的方法

有些人一直认为我的问题是重复的。请仔细阅读我的问题。我不是在尝试添加类，而是在尝试添加规则。这是非常不同的，对于这样的问题没有结果

以下是我想要根据某些条件添加到宿主元素的两条规则：

custom-component + custom-component > .vertical-component {
    margin-top: 1rem;
}

及

在我的组件代码中，我有如下内容：

export class CustomComponent {
    public constructor(private host: ElementRef, private renderer: Renderer2) {

    }

    public applyStylesToHost(): void {
        if (this.variant == TYPE.VERTICAL) {
            // Set the rule with the margin-top
        } else {
            // Set the rule with the margin-left
        }
    }
}

我一直在寻找一种类似于this.renderer.setRule（）的方法，但是没有这样的方法。如何以编程方式将特定规则添加到宿主元素

---

我找到的最接近的东西是。作者建议执行

document.createElement（“style”）.sheet.addRule（）

，但当我尝试这样做时，

sheet

元素上不存在方法

addRule

。

正如Balastrong提到的，您可以使用ngClass 逻辑完成=错误

ngOnInit() {
  ... your logic
  this.logicFinished = true
}

[ngClass]="{'vertical-component': logicFinished, 'horizontal-component': !logicFinished}"

另一种javascript黑客解决了这个问题

this.yourElement = document.getElementById('yourElement') as HTMLElement
this.yourElement.style.margin = '1rem 0 0 0'
this.yourElement.style.margin = '0 0 0 1rem'

---

但是对于这个问题，NgClass似乎是一个更好的解决方案。

正如Balastrong提到的，您可以使用NgClass

this.yourElement = document.getElementById('yourElement') as HTMLElement
this.yourElement.style.margin = '1rem 0 0 0'
this.yourElement.style.margin = '0 0 0 1rem'

逻辑完成=错误

ngOnInit() {
  ... your logic
  this.logicFinished = true
}

[ngClass]="{'vertical-component': logicFinished, 'horizontal-component': !logicFinished}"

另一种javascript黑客解决了这个问题

this.yourElement = document.getElementById('yourElement') as HTMLElement
this.yourElement.style.margin = '1rem 0 0 0'
this.yourElement.style.margin = '0 0 0 1rem'

---

但对于这个问题，NgClass似乎是一个更好的解决方案。

如果您想这样做，您应该使用以下方法：

this.yourElement = document.getElementById('yourElement') as HTMLElement
this.yourElement.style.margin = '1rem 0 0 0'
this.yourElement.style.margin = '0 0 0 1rem'

renderer.setStyle(...)

或

---

我建议您阅读

的文档，如果您想这样做，您应该使用以下方法：

renderer.setStyle(...)

或

---

我建议您阅读

的文档，您可以将它们作为

标签添加到整个文档中吗

var st = document.createElement('style'); 
st.appendChild(document.createTextNode(`
    custom-component + custom-component > .vertical-component {
        margin-top: 1rem;
    }
`));  
document.head.appendChild(st);

---

您能否将它们作为

标记添加到整个文档中

var st = document.createElement('style'); 
st.appendChild(document.createTextNode(`
    custom-component + custom-component > .vertical-component {
        margin-top: 1rem;
    }
`));  
document.head.appendChild(st);

---

这回答了你的问题吗@不，你链接的问题是关于课程的。我想添加我在代码中提供的特定规则。我发现的最接近的事情是：然而，由于某种原因，它不起作用。

style.sheet

上的方法

addRule（）

不存在。是否正在查找HostBinding@埃利索不太喜欢。我已经找到了如何将类或样式应用于主机。我的问题是，这是我要添加的选择器

自定义组件+自定义组件>。水平组件

。简单地说，我的自定义组件可以是“垂直”或“水平”类型。如果它是垂直的，那么我只想在前面有其他自定义组件的情况下将边距顶部添加到主机。如何在dom中修改属性、类和样式这是否回答了您的问题@不，你链接的问题是关于课程的。我想添加我在代码中提供的特定规则。我发现的最接近的事情是：然而，由于某种原因，它不起作用。

style.sheet

上的方法

addRule（）

不存在。是否正在查找HostBinding@埃利索不太喜欢。我已经找到了如何将类或样式应用于主机。我的问题是，这是我要添加的选择器

自定义组件+自定义组件>。水平组件

。简单地说，我的自定义组件可以是“垂直”或“水平”类型。如果它是垂直的，那么我只想在前面有其他自定义组件的情况下将边距顶部添加到主机。如何在dom中修改属性类和样式不幸的是，这并不能解决我的问题。如前所述，我不是在尝试添加类，而是在尝试添加带有特定选择器的规则。你可以找到我想要添加的两个规则，但是没有简单的类。不幸的是，这不能解决我的问题。如前所述，我不是在尝试添加类，而是在尝试添加带有特定选择器的规则。你可以找到我想要添加的两条规则，但是没有简单的类。我认为他试图让子元素影响父元素。通过修改css类，我认为他试图让子元素影响父元素。通过修改css类。