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

我在一个WYSIWYG广告生成器中工作，试图用以下方式设计第一个字母（“H”在Hello中）的样式，即内联JS，我仅限于此

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

div.innerHTML=unit.greeting//字符串值
div.style.color=“灰色”//作品
div.firstLetter.style.color=“橙色”//不起作用

所见即所得输出：

 <div>
    Hello
 </div>

你好

不能使用内联样式（不将第一个字母包装到另一个元素中），但可以通过JavaScript添加类，并使用CSS：

var div=document.getElementById（“目标”）；
div.className=“类”
。该类{
颜色：灰色；
}
.班级：第一个字母{
颜色：橙色；
}

你好
不能使用内联样式（不将第一个字母包装到另一个元素中），但可以通过JavaScript添加类，并使用CSS：


var div=document.getElementById（“目标”）；
div.className=“类”
。该类{
颜色：灰色；
}
.班级：第一个字母{
颜色：橙色；
}

你好
这就是我使用JavaScript的方式：


const div=document.querySelector（“div”）；
div.style.color=“灰色”；
让string=div.textContent；
string=string.trim（）；
div.innerHTML=`${string.charAt（0）}${string.slice（1）}`

你好
这就是我使用JavaScript的方式：


const div=document.querySelector（“div”）；
div.style.color=“灰色”；
让string=div.textContent；
string=string.trim（）；
div.innerHTML=`${string.charAt（0）}${string.slice（1）}`

你好
你应该用
span
将第一个字母包装起来，并设置样式

您还可以将
样式标记
附加到
文档头
，并使用
：：第一个字母
psudo-elment，例如：

const style = document.createElement('style');
style.innerHTML = 'div::first-letter { color: red }';
document.head.appendChild(style);

document.styleSheets[0].insertRule("#test{ color: #00ff00; }")
document.styleSheets[0].insertRule("#test::first-letter{ color: #ffffff; }")

您应该用
span
将第一个字母包装起来，并设置样式

您还可以将
样式标记
附加到
文档头
，并使用
：：第一个字母
psudo-elment，例如：

const style = document.createElement('style');
style.innerHTML = 'div::first-letter { color: red }';
document.head.appendChild(style);

document.styleSheets[0].insertRule("#test{ color: #00ff00; }")
document.styleSheets[0].insertRule("#test::first-letter{ color: #ffffff; }")

如果您只想使用javascript：


const target=document.getElementById（“目标”）；
const h=target.children[0]；
h、 style.color=“橙色”

你好
如果您只想使用javascript：


const target=document.getElementById（“目标”）；
const h=target.children[0]；
h、 style.color=“橙色”

你好
我的解决方案的灵感来自。
您不能仅在特定元素上设置伪类的样式，因此我的解决方案如下。现在，既然您想要内联JS，那么您可能乐于为内联JS使用onload（）事件。但是，onload仅适用于某些特定的HTML标记，例如，等，请参阅。因此，我在标签上使用它。您也不能对伪类使用内联CSS，请参阅。所以，我猜这与伪类上的内联JS非常接近



你好特别1
你好特别1
你好特别3
你好，不特别
我的解决方案的灵感来自。
您不能仅在特定元素上设置伪类的样式，因此我的解决方案如下。现在，既然您想要内联JS，那么您可能乐于为内联JS使用onload（）事件。但是，onload仅适用于某些特定的HTML标记，例如，等，请参阅。因此，我在标签上使用它。您也不能对伪类使用内联CSS，请参阅。所以，我猜这与伪类上的内联JS非常接近



你好特别1
你好特别1
你好特别3
你好，不特别
有点不确定的解决方案-只需在现有规则集中插入新规则：

<div id="test">Hello</div>

供参考：

但是，我无法想象在生产中使用这种方法。
有点不确定的解决方案-只需在现有规则集中插入一个新规则：

<div id="test">Hello</div>

供参考：

尽管如此，我无法想象在生产中使用这种方法。
第一个字母应该怎么做？你不能只设计div的一部分。你必须使用span或其他什么。像这样？div.innerHTML=“+unit.greeting+”“@FoundNil-事实上，你可以。某些选定部分，如第一个字母.WTH是
div.firstLetter
？这对我来说是新的。你能给我指一下你以前知道的相关参考资料吗，那是存在的，这样我就可以阅读上面的文件了
firstLetter
应该怎么做？你不能只设计div的一部分。你必须使用span或其他什么。像这样？div.innerHTML=“+unit.greeting+”“@FoundNil-事实上，你可以。某些选定部分，如第一个字母.WTH是
div.firstLetter
？这对我来说是新的。你能给我指一下你以前知道的相关参考资料吗，那是存在的，这样我就可以阅读上面的文件了在这种情况下，我没有访问样式表的权限，否则我会使用：：first-letter@Jake-您也可以动态添加
样式
元素。您可以使用内联样式进行此操作。我不建议这样做，但这是可能的。@Jake如果你有权访问
元素，你也有权访问
元素。如果没有其他方法，动态生成它。@corykliser-Oh？酷！怎么用？我的意思是，在不引入额外元素的情况下（这在用户编辑它的环境中可能会特别有问题），在这种情况下，我无法访问样式表，否则我会使用：：first-letter@Jake-您也可以动态添加
样式
元素。您可以使用内联样式进行此操作。我不建议这样做，但这是可能的。@Jake如果你有权访问
元素，你也有权访问
元素。如果没有其他方法，动态生成它。@corykliser-Oh？酷！怎么用？我的意思是，不引入额外的元素（这可能是一个特别的问题）