Question

我正在WYSIWYG广告制作工具中尝试按以下方式设置第一个字母（＆＃34; H＆＃34;在Hello中）的样式，内联JS，我只限于此。

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

WYSIWYG输出：

 <div>
    Hello
 </div>

Answer 1

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

＆＃13;

var div = document.getElementById("target");
div.className = "the-class";

＆＃13;

.the-class {
  color: gray;
}
.the-class:first-letter {
  color: orange;
}

＆＃13;

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

＆＃13;

如果您还需要动态生成样式：

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 2

这就是我用JavaScript做的方法：

＆＃13;

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)}`;

＆＃13;

<div>
  Hello
</div>

＆＃13;

Answer 3

你应该用span包装第一个字母并设置样式。

您还可以将style tag附加到document.head并使用::first-letter psudo-elment，例如：

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

Answer 4

如果您只想使用javascript：

＆＃13;

First sentence: This is the first sentence. 
Second sentence: This is the second sentence. 
Third sentence: This is the third sentence.

＆＃13;

const target = document.getElementById("target");
const h = target.children[0];
h.style.color = "orange"

＆＃13;

Answer 5

我的解决方案受到this post的启发。你不能单独在特定元素上设置伪类，因此我的下面的解决方案。现在，既然你想要内联JS，也许你可以使用内联JS的onload（）事件来娱乐。但是，onload仅适用于某些专门的HTML标记，例如＆lt; body＆gt;，＆lt; iframe＆gt;等，请参阅here。因此我在＆lt; body＆gt;上使用它标签。您也不能将内联CSS用于伪类，请参阅here。所以，我猜这与伪内联的内联JS一样接近。

<!doctype html>
<html lang="en">
<body onload="document.styleSheets[0].insertRule('.firstLetterSpecial:first-letter { color: orange; }', 0);">

    <div class="firstLetterSpecial" >
    Hello Special 1
    </div>
     <div class="firstLetterSpecial" >
    Hello Special 1
    </div>
     <div class="firstLetterSpecial" >
    Hello Special 3
    </div>
     <div >
    Hello Not special
    </div>
</body>
</html>

现在，如果您无法访问＆lt; body＆gt;标记，您可以潜入未使用和隐藏的＆lt; iframe＆gt;

<!doctype html>
<html lang="en">
<body>

    <!-- I am being mean and sneak an iframe in here just to get the onload().-->
    <iframe style="display:none;"
    onload="document.styleSheets[0].insertRule('.firstLetterSpecial:first-letter { color: orange; }', 0);">
    </iframe>

    <div class="firstLetterSpecial" >
    Hello Special 1
    </div>
     <div class="firstLetterSpecial" >
    Hello Special 1
    </div>
     <div class="firstLetterSpecial" >
    Hello Special 3
    </div>
     <div >
    Hello Not special
    </div>
</body>
</html>

Answer 6

有点不确定的解决方案 - 只需在现有规则集中插入新规则：

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

现在假设您的应用中至少定义了一个样式表，因此您只需在其中添加规则，例如：

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

供参考： https://davidwalsh.name/add-rules-stylesheets

但是，我无法想象在生产中使用这种方法。

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

6 个答案: