javascript - 如何使用内联JS定位div的第一个字母？

Question

我正在使用所见即所得广告构建器，并尝试通过以下方式(内联 JS)设置第一个字母(Hello 中的“H”)的样式，但我仅限于此。

<script>
  div.innerHTML = unit.greeting;  //string value 
  div.style.color = "gray";    //works
  div.firstLetter.style.color = "orange";   // doesnt work
</script>

.

所见即所得输出:

 <div>
    Hello
 </div>

Answer 1

您无法使用内联样式(不将第一个字母包装在另一个元素中)来做到这一点，但您可以通过 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>