如何使用内联JS来定位div的firstLetter？
如何使用内联JS来定位div的firstLetter？
提问于 2018-06-01 05:08:23
我在一个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>回答 6
Stack Overflow用户
回答已采纳
发布于 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>
Stack Overflow用户
发布于 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>
Stack Overflow用户
发布于 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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50632805
复制相关文章
相似问题