javascript - 如何使用CSS/HTML或Javascript更改单词中单个字母的颜色

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center。




                                7年前关闭。


这是我要实现的目标的一个示例：

[网站链接已删除]

但是，如果您看一下源代码，它会有很多凌乱的CSS代码。有没有办法我可以用Javascript做到这一点？
先谢谢了！

最佳答案

这是您只用HTML编写的一种方式：

<div id="wrap" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin, felis nec lacinia egestas, metus sem tempor ligula, nec feugiat risus erat a ante. Vivamus a neque eu lorem pharetra vulputate ac id arcu. Nulla facilisi. Quisque porta purus id dolor sollicitudin ut interdum eros bibendum. Nunc dignissim velit vitae leo posuere vel tristique lacus bibendum. Nam suscipit elit magna. Cras odio ipsum, ultricies aliquet lacinia ac, tincidunt ut erat. In venenatis interdum mauris, a lobortis augue mattis vel. Donec sem urna, adipiscing laoreet consectetur nec, sodales id nibh. Integer gravida sem luctus nibh luctus tristique. In tempor adipiscing nisl. Proin consectetur, lorem eget sodales auctor, nulla quam condimentum tortor, sed fringilla massa neque non dolor.
</div>

JS：

var elem=document.getElementById("wrap");
var l=elem.innerHTML.length;
var newAns="";
for(var a=0;a<l;a++)
{
    newAns+='<span onmouseover="change1(this)" onmouseout="change2(this)" >'+elem.innerHTML.charAt(a)+'</span>';
}
elem.innerHTML=newAns;

function change1(x)
{
    x.style.color="yellow";
}
function change2(x)
{
    x.style.color="black";
}

小提琴：http://jsfiddle.net/mageek/HKBVJ/

关于javascript - 如何使用CSS/HTML或Javascript更改单词中单个字母的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11176602/

上一篇：jquery - 悬停效果jquery

下一篇：javascript - jQuery 动画重叠

相关文章：

php - 在网络上读取 PNG 元数据

javascript - next.js 构建时间很慢。我怎样才能让它们更快？

html - 如何用 dl-horizontal 修复这个水平溢出？

jquery - 切换额外的 flexbox div

javascript - Javascript 中的 sleep 、循环或什么？

javascript - 为什么从 javascript 连接 SQL 数据库是一种不好的做法？

html - 将表单结果提交到谷歌脚本？

javascript - 如何设置li :before with ng-style的css

html - 如何在背景图像上创建挖空文本，以便文本可以在图像上动画

javascript - 选择嵌套在多个 div block 中的 span 标签