有人可以解释为什么我不能动态添加渐变样式吗？答案

【问题标题】：Can someone explains why i cant add gradient style dinamicly?有人可以解释为什么我不能动态添加渐变样式吗？
【发布时间】：2021-07-05 19:15:02
【问题描述】：

这是我的第一个问题，我需要帮助。

背景设置为linear-gradient 我想设置输入范围的样式以在用户移动它时更改渐变。

我有变量color，color 保存基于输入值的梯度值。我的可变颜色正在改变，但由于某种原因，我无法将其添加到 CSS。

这是我的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>


  <body onload="myF()">
  <input 
  type="range"
  value="0" 
  min="0" 
  max="10000" 

  id="mySlider" 
  class="slider">

 <h4>
 <span class="price" id="value">0</span>
 / month
</h4>

</body>
</html>

这是我的 CSS：

 .slider{
 margin: 2rem auto;
 width: 60%;
 height: 13px;

 border-radius: 7px;
 background: linear-gradient(90deg , rgb(0, 255, 200) 20% ,  rgb(219, 219, 219)20%);

 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 outline: none;
 }
 /* SLIDER THUMB FOR GOOGLE CHROME */
 .slider::-webkit-slider-thumb{
 -webkit-appearance: none;
 appearance: none;
 height: 40px;
 width: 40px;
 background-color: black;
 ocutline: none;
 border: none;
 border-radius: 20px;
 cursor: pointer;
 }
 /* SLIDER THUMB FOR MOZILA-FIREFOX */
.slider::-moz-range-thumb{
height: 50px;
 width: 50px;
 background-color:  rgb(0, 255, 200);
 outline: none;
 border: none;
 border-radius: 25px;
 cursor: pointer;
 }
 .price{
 font-size: 2rem;
 display: inline;
 }

我有函数myF()，我用<body onload="myF()">将它添加到正文中，在那个函数中我有两件事

显示滑块值的函数
应该根据输入改变梯度的函数（它不起作用）。我有 2 个日志供您查看。 slider.style.background 记录空字符串。并且颜色记录当前的渐变女巫很好。

这是我的脚本：

  function myF(){
  var slider = document.getElementById("mySlider");
   var output = document.getElementById("value");


   let update = () => output.innerHTML =  "$"   +  (slider.value/100) ;

  slider.addEventListener('input', update);
  update();


   slider.addEventListener('mousemove' , () =>{

   var x = (slider.value/100);
   var color = 'linear-gradient(90deg , rgb(0, 255, 200)' + x + 
      '% ,  rgb(219, 219, 219)' + x +   '%);' ;

    slider.style.background = color ;

   /* for some reason frst log is good value but second log is EMPTY STRING */

    console.log(color);
    console.log(slider.style.background);
  
    } )
    } ;

我将所有这些都上传到了 GitHub，它在 git-pages 上运行。

git-hub https://github.com/Shomy032/Slider.git

直播https://shomy032.github.io/Slider/

这是我的第一个问题，给您带来的不便敬请谅解：)

【问题讨论】：

字符串中的分号打破了它。请改用'linear-gradient(90deg , rgb(0, 255, 200)' + x + '% , rgb(219, 219, 219)' + x + '%)' ;

标签： javascript css dom frontend

【解决方案1】：

您的问题是您在颜色末尾添加;，这是不允许的，因此它不会接受该值。

删除; 将解决您的问题。

你的代码在这里工作。

function myF() {
  var slider = document.getElementById("mySlider");
  var output = document.getElementById("value");


  let update = () => output.innerHTML = "$" + (slider.value / 100);

  slider.addEventListener('input', update);
  update();


  slider.addEventListener('mousemove', () => {

    var x = (slider.value / 100);
    var color = 'linear-gradient(90deg, rgb(0, 255, 200)' + x +
      '%,  rgb(219, 219, 219)' + x + '%)';

    slider.style.background = color;

  })
}

.slider {
  margin: 2rem auto;
  width: 60%;
  height: 13px;
  border-radius: 7px;
  background: linear-gradient(90deg, rgb(0, 255, 200) 20%, rgb(219, 219, 219)20%);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}


/* SLIDER THUMB FOR GOOGLE CHROME */

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 40px;
  width: 40px;
  background-color: black;
  ocutline: none;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}


/* SLIDER THUMB FOR MOZILA-FIREFOX */

.slider::-moz-range-thumb {
  height: 50px;
  width: 50px;
  background-color: rgb(0, 255, 200);
  outline: none;
  border: none;
  border-radius: 25px;
  cursor: pointer;
}

.price {
  font-size: 2rem;
  display: inline;
}

<!DOCTYPE html>
<html>

<head>
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>


<body onload="myF()">
  <input type="range" value="0" min="0" max="10000" id="mySlider" class="slider">

  <h4>
    <span class="price" id="value">0</span> / month
  </h4>

</body>

</html>

【讨论】：