H5選擇顏色-前端顏色選擇器

時間 2020-06-29

標籤 h5 選擇顏色前端選擇器简体版

原文原文鏈接

開發一年多了，一直用angular2框架，框架雖然能大大減小程序員的工做量，但我仍是更喜歡用原生的技術寫代碼。javascript

原生的就像內功心法，框架是招式，招式雖然實用，可是想成爲高手仍是得有內功修養。html

很少說，如今展現一個原生顏色選擇器java

代碼：程序員

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select color</title>
</head>
<body>
　　<input type="color" name="color" id="color" onchange="changeColor()"> //選擇顏色的標籤，type="color"angular2

　　<span id="colorInfo"></span>
</body>
<script type="text/javascript">
　　var color = document.getElementById("color"); 　　　　　　　　　　//經過使用 getElementById() 來訪問 <color> 元素
　　var colorInfo = document.getElementById("colorInfo");
　　colorInfo.style.color = color.value; 　　　　　　　　　　　　　　　　 //給<span>的字體加顏色
　　colorInfo.innerHTML = color.value;　　　　　　　　　　　　　　　　 //給<span>加內容(<color>的值)
　　function changeColor(){ 　　　　　　　　　　　　　　　　　　　　 //改變顏色的事件
　　　　colorInfo.style.color = color.value;
　　　　colorInfo.innerHTML = color.value;
　　}
</script>
</html>框架

效果圖：字體

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。