使用 JavaScript 更改特定 div 中特定字符的 CSS答案

【问题标题】：Change CSS of a certain character in a specific div using JavaScript使用 JavaScript 更改特定 div 中特定字符的 CSS
【发布时间】：2014-05-02 18:38:42
【问题描述】：

有没有办法改变整个页面上单个字符的CSS：

例如

我的页面上的 div 很少

<div class="a">
abcd
</div>
<div class="b">
abcd
</div>
<div class="c">
abcd
</div>
<div class="d">
abcd
</div>

我想更改字符“d”的 CSS，但仅限于属于“c”类的 div

有没有办法做到这一点。

附：我想改变那个单个字符的字体

【问题讨论】：

您不能直接使用它，但是如果您将d 包装在<span> 中，则可以将样式放在跨度上。所以，是的，你可以，但你必须做一些 DOM 修改。
div里面只有文字吗？
@AlexW 是的，我想要这个功能的 div 里面只有文本
How to apply a style to a single special HTML character across the page的可能重复

标签： javascript html css

【解决方案1】：

这在 Chrome 上适用于我：

var Cs = document.getElementsByClassName('c');

for(var i = 0; i < Cs.length; i++)
{
    var text = Cs[i].textContent;
    Cs[i].innerHTML = text.replace('d','<span class="red">d</span>');
}

http://jsfiddle.net/u5ZC8/

【讨论】：

@kapilchhattani 如果你想支持 IE8 或更低版本，只需将textContent 更改为innerHTML。请注意，如果 div 包含文本且仅包含文本，这将起作用。
我可能很快会在 div 中添加一些其他内容，比如在其中添加一些标签，之后会发生什么......

【解决方案2】：

我的方法（你可以缩短/优化代码。这段代码解释得很详细）：

// config
var string = 'd';
var selector = '.c';
var font_size = 28;

// create regex from string
var regex = new RegExp(string,"g");

// wrap span around string and set font-size
var replace = '<span style="font-size: ' + font_size + 'px;">' + string + '</span>';

// find elements with given selector
var el = document.querySelectorAll(selector);
for (var i = 0; i < el.length; i++) {

    // get HTML from element and ...
    var text = el[i].innerHTML;

    // ... replace it with given span element
    var new_text = text.replace(regex, replace);

    // set new HTML
    el[i].innerHTML = new_text;
};

工作小提琴：http://jsfiddle.net/gopeter/tN3Bx/8/

编辑

抱歉，您要求使用字体系列。新小提琴：http://jsfiddle.net/gopeter/tN3Bx/9/

【讨论】：

【解决方案3】：

首先你需要找到className为c的标签。

var class = document.getElementsByClassName('c');

那么class就是[]，所以我们需要使用for循环来查找大家。

for (var i = 0, l = Cs.length; i < l; i++) {
    class[i].innerHTML = class[i].innerHTML.replace('d','<span style="color:red">d</span>');
}

【讨论】：

【解决方案4】：

字体可以包含任意自定义的单个字符（FontForge 是你的朋友）：

@font-face { font-family: a; src: url(a); }
@font-face { font-family: b; src: url(b); }
@font-face { font-family: c; src: url(c); }
@font-face { font-family: d; src: url(d); }
.a { font-family: a; }
.b { font-family: b; }
.c { font-family: c; }
.d { font-family: d; }

【讨论】：