如何解决如何在扩展HTMLElement的类中应用带有setAttribute的类样式?
我有一个类,我添加了一个带有类名的元素,该类名应使我以CSS样式定义的文本变白,但事实并非如此。文本保持黑色。除了手动设置元素的CSS之外,我应该如何实现?
class TestClass extends HTMLElement {
constructor() {
super();
var shadow = this.attachShadow({
mode: 'open'
});
var title = document.createElement('h5');
title.setAttribute('class','whiteText');
title.innerText = "Test text"
shadow.appendChild(title);
}
}
customElements.define('test-el',TestClass);
var container = document.getElementById("container")
container.innerHTML = ""
container.appendChild(new TestClass());
body {
background-color: black;
margin: 0;
}
.whiteText {
font-family: Helvetica,sans-serif;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id='container'>
</div>
解决方法
修复CSS。
body {
background-color:black;
margin: 0;
}
.whiteText {
font-family: Helvetica,sans-serif;
color:white;
}
添加以添加类,这是更简单的方法
title.classList.add("whiteText");
// or
title.classList.toggle("whiteText");
,
您已将h5
元素添加到阴影dom,因此不应用样式。
要应用样式,需要在阴影dom内定义独立的<style>
标签,如下所示。
class TestClass extends HTMLElement {
constructor() {
super();
var shadow = this.attachShadow({
mode: 'open'
});
var title = document.createElement('h5');
title.setAttribute('class','whiteText');
title.innerText = "Test text"
shadow.appendChild(title);
var style = document.createElement('style');
style.innerHTML = '.whiteText { font-family: Helvetica,sans-serif; color: white; }';
shadow.appendChild(style);
}
}
customElements.define('test-el',TestClass);
var container = document.getElementById("container")
container.innerHTML = ""
container.appendChild(new TestClass());
body {
background-color: black;
margin: 0;
}
<div id='container'>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。