,javascript,html"/>
时间戳

首页 > 解决方案 > 谷歌浏览器显示基本过时的颜色选择器

javascript - 谷歌浏览器显示基本过时的颜色选择器

问题描述

这是过时的颜色选择器

我想要的颜色选择器是这个

os -windows 10, chrome vr -Latest version... 我想使用不同的颜色选择器来动态给出值。

我的代码：

var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var body = document.getElementById("gradient");
var css = document.querySelector("h3");

function setGradient() {
    body.style.background = 
    "linear-gradient(to right, " 
    + color1.value 
    + ", " 
    + color2.value 
    + ")";

    css.textContent = body.style.background + ";" ;
}

color1.addEventListener("input", setGradient);

color2.addEventListener("input", setGradient);



<!DOCTYPE html>
<html>
<head>
    <title>Background gradient</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id="gradient">
     <h1>Background Generator</h1>
     <input class="color1" type="color" value="#ff0000">
     <input class="color2" type="color" value="#ffff00">
     <h2>Current CSS Background</h2>
     <h3>linear-gradient(to right, rgb(255, 0, 0), rgb(255, 255, 0));</h3>
     <script type="text/javascript" src="script.js"></script>
</body>
</html>

标签： javascripthtml

解决方案

您不能设置默认颜色选择器的样式。可以选择安装 jQuery 插件并使用它们的版本。

以下是一些示例：https ://www.jqueryscript.net/tags.php?/color%20picker/

推荐阅读