我在一个WYSIWYG广告构建器中工作,并试图以以下方式设置第一个字母(Hello中的“H”)的样式,内联JS,这是我的限制。
<script>
div.innerHTML = unit.greeting; //string value
div.style.color = "gray"; //works
div.firstLetter.style.color = "orange"; // doesnt work
</script>
。
所见即所得输出:
<div>
Hello
</div>
发布于 2018-06-01 05:15:30
您不能使用内联样式(不将第一个字母包装在另一个元素中)来做这件事,但是您可以通过JavaScript添加一个类,并使用CSS:
var div = document.getElementById("target");
div.className = "the-class";
.the-class {
color: gray;
}
.the-class:first-letter {
color: orange;
}
<div id="target">
Hello
</div>
如果您还需要动态生成样式:
var div = document.getElementById("target");
div.className = "the-class";
var style = document.createElement("style");
style.type = "text/css";
style.textContent =
'.the-class { ' +
' color: gray; ' +
'} ' +
'.the-class:first-letter { ' +
' color: orange; ' +
'}';
document.body.appendChild(style);
<div id="target">
Hello
</div>
发布于 2018-06-01 05:15:50
这就是我用JavaScript做这件事的方式:
const div = document.querySelector("div");
div.style.color = "grey";
let string = div.textContent;
string = string.trim();
div.innerHTML = `<span style="color: orange">${string.charAt(0)}</span>${string.slice(1)}`;
<div>
Hello
</div>
发布于 2018-06-01 05:24:43
您应该用span
对第一个字母进行换行,并设置它的样式。
您还可以将style tag
附加到document.head
并使用::first-letter
伪元素,例如:
const style = document.createElement('style');
style.innerHTML = 'div::first-letter { color: red }';
document.head.appendChild(style);
https://stackoverflow.com/questions/50632805
复制相似问题