前端颜色选择器

导语:H5新增颜色选择,允许配置颜色

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;

}

效果图:

初始化
点击选色器
点确定后
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,104评论 1 10
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,315评论 0 3
  • 简述JavaScript起源起源于美国的Netscape公司,原名为LiveScript,后改为JavaScrip...
    3ab670b99521阅读 3,052评论 0 0
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,054评论 0 2
  • 此代码是很久之前写的需要和emlog一路上注册插件配合使用,替换一路上注册插件的前台页面为以下代码.本代码美化部分...
    f675b1a02698阅读 421评论 0 0