时间戳

首页 > 解决方案 > 如何使用内联 JS 定位 div 的 firstLetter？

javascript - 如何使用内联 JS 定位 div 的 firstLetter？

问题描述

我在 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>

标签： javascript

解决方案

你不能用内联样式来做（不将第一个字母包装在另一个元素中），但你可以通过 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>

推荐阅读