编写html中如何将中间某一个字符改变字体颜色?

编写html中如何将中间某一个字符改变字体颜色?,第1张

更改一段文字中的某一个字符字体颜色需要给这个字符添加一个标签,然后给这个标签添加相应的css样式即可。

工具原料:编辑器、浏览器

1、一个段落中的某一个字需要更改字体颜色,需给这个更改颜色的字添加一个标记并添加想要的css样式,代码如下:

<p>这是一段的测试的文字,中间需要一个字是<span>红</span>色的突出显示</p>

<style>

span {

color: red

}

</style>

2、运行的结果如下:

html:

<input type="color" name="color" id="color" onchange="changeColor()">

<span id="colorInfo"><span>

   //选择颜色的标签,type="color"

js:

var color = document.getElementById("color")//通过使用 getElementById() 来访问 元素

var colorInfo = document.getElementById("colorInfo")

colorInfo.style.color = color.value//给的字体加颜色

colorInfo.innerHTML = color.value//给加内容(的值)

function changeColor(){ //改变颜色的事件

colorInfo.style.color = color.value

colorInfo.innerHTML = color.value

}

效果图:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7183466.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-02
下一篇 2023-04-02

发表评论

登录后才能评论

评论列表(0条)

保存