<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
}
效果图：
详细步骤如下：
1、双击打开软件，点击“文件”--“新建”文件，创建一个新的html文档。
2、文档新建后，在左上角视图那里，可以选择“拆分”或者“设计”视图，不要选择代码，对于新手来说，选择代码视图需要靠代码直接修改。设计视图很直观的工具，对于新手来说是一个不错的福利。
3、把代码在代码区复制进去，鼠标在设计区域轻轻点一下，代码所表现的东西就已经显示出来。把“属性”面板找出来。
4、选中你要修改的文字，“属性”面板中找到颜色框，左击颜色框，弹出颜色选择器，从中选择你喜欢的颜色。若这些不能满足你，可以在颜色选择器的右上角找到你需要的其他颜色。
5、文字取消选择，查看字体，已经修改完成。
注意事项：
若全部文字需要修改颜色就要选中全部文字，若不选中，无法修改。
如果颜色器满足不了你，可以选择颜色器右上角的小球选取更多颜色哦。
