JavaScript body.style.background不处理script.js中的线性梯度，但在控制台中工作得很好。
body.style.background =在script.js包含的文件中不起作用--其他一切都有效--已兑现的多姆选择器输入body.style.background = 'red'；工作，但在包含的文件中不起作用
我尝试过console.logs，如输出下面的代码所描述的，特别是如果我从回调中复制日志并将其粘贴到body.style.background中，那么它可以工作，但不能在脚本文件中运行。
color_1 = document.querySelector("#color-1");
color_2 = document.querySelector("#color-2");
body = document.querySelector("body");
function changeBackgroundColor() {
body.style.background = "linear-gradient(to right, "+color_1.value+ ", "+ color_2.value+");";
//************* I am getting the console.logs but the background's not changing
console.log("linear-gradient(to right, " + color_1.value + ", " + color_2.value + ");");
}
//************* Both the listeners work fine and the cashed selectors
color_1.addEventListener("input", changeBackgroundColor);
color_2.addEventListener("input", changeBackgroundColor);<html>
<head>
<title>Background Color Generator</title>
<!-- Custom Styles -->
<style type="text/css">
body {
background: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>
<div class="container">
<input id="color-1" type="color">
<input id="color-2" type="color">
</div>
</body>
</html>
当颜色输入发生变化时，背景应该改变颜色，但是什么都不会发生。
回答 2
Stack Overflow用户
发布于 2019-01-09 12:44:28
为了像这样通过JavaScript进行线性渐变，您需要访问body.style.backgroundImage属性。然后，您可以传入您的linear-gradient字符串来构建渐变。
function changeBackgroundColor() {
body.style.backgroundImage = "linear-gradient(to right, "+ color_1.value +", "+ color_2.value +")";此外，每当您传递字符串(在本例中或任何时候以这种方式设置CSS属性时)，您都不需要提供CSS所期望的尾随;。你的台词是：
"linear-gradient(to right, "+ color_1.value +", "+ color_2.value +");";请注意您拥有的第一个;。应该删除它，让您使用以下字符串：
"linear-gradient(to right, "+ color_1.value +", "+ color_2.value +")";您可以在MDN上找到一些示例：
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
在W3Schools上：
Stack Overflow用户
发布于 2019-01-09 12:46:01
你很接近正确的答案。唯一需要做的是从代码中删除正在进行梯度更改的; (所以应该是color_2.value + ")";，而不是color_2.value + ");"; )。
请注意，您希望修改实际属性。;只是CSS中用来区分不同属性的分隔符，您在从代码中修改它们时不需要它。
下面是一个有用的例子。
color_1 = document.querySelector("#color-1");
color_2 = document.querySelector("#color-2");
body = document.querySelector("body");
function changeBackgroundColor() {
body.style.backgroundImage = "linear-gradient(to right, " +color_1.value+ ", "+ color_2.value + ")";
}
//************* Both the listeners work fine and the cashed selectors
color_1.addEventListener("input", changeBackgroundColor);
color_2.addEventListener("input", changeBackgroundColor);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Background Color Generator</title>
<!-- Custom Styles -->
<style type="text/css">
body {
height: 100vh;
background: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>
<div class="container">
<input id="color-1" type="color">
<input id="color-2" type="color">
</div>
<!-- Custom Javascript -->
<script src="script.js"></script>
</body>
</html>
干杯!
https://stackoverflow.com/questions/54110082
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号