使用JavaScript更改类的CSS样式

joel 发表于 Dev

乔尔

我是javascript新手，正在编写温度转换器。该程序基本上完成了，只是我试图使其变色，以使文本的颜色根据温度的值而变化。例如：其摄氏3度，因此文本为蓝色表示很冷。

我给所有想要改变颜色的类都添加了一个称为温度的类。我已经尝试了document.getElementByClassName以及document.QuerySelector。

CSS文件中未涉及“温度”类

同一行两次显示此错误：

//Creating the funtion to convert celcius
function celciusConverter() {
  const cTemp = parseFloat(celciusInput.value);
  //Working out celcius to farenheight
  const fTemp = (cTemp * (9/5) + 32);

  //Working out celcius to kelvin
  const kTemp = (cTemp + 273.15);

  //Displaying the temperiture in all formats
  farenheightInput.value = fTemp;
  kelvinInput.value = kTemp;

  if (cTemp < 15){
    document.getElementsByClassName('#temperature')[0].style.color='black';
  }
}
//Refreshing the screen when a number is put in
  celciusInput.addEventListener('input', celciusConverter);

@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body{
  background: black;
}

div{
  height: 33.333vh;
}

#Farenheight{
  border-top: 5px;
  border-bottom: 5px;
}
input[type=number]{
  outline: none;
  width: 100%;
  height 100%;
  background: black;
  color: white;
  font-size: 6em;
  text-align: centre;
  border: 0;
  font-family: Oswald, sans-serif;
}

<body>

    <div id="celcius" class"temperature">
      <input type="number" placeholder="Celcius. . .">
    </div>

    <div id="farenheight" class"temperature">
      <input type="number" placeholder="Farenheight. . .">
    </div>

    <div id="kelvin" class"temperature">
      <input type="number" placeholder="Kelvin. . .">
    </div>



  </body>

未捕获的TypeError：无法读取HTMLInputElement.celciusConverter上未定义的属性“样式”

弗朗索瓦·胡佩

颜色更改无法正常工作的原因是，您的temperature班级位于包装输入的div上，并且表单项（输入/ textarea / etc）默认情况下不会从其父级继承字体信息。使用querySelectorAll，您可以使用input[type=number]选择器，就像在CSS中一样。

    const celciusInput = document.querySelector("#celcius > input"); 
    const farenheightInput = document.querySelector("#farenheight > input"); 
    const kelvinInput = document.querySelector("#kelvin > input"); 
    //Creating the funtion to convert celcius
    function celciusConverter() {
        const cTemp = parseFloat(celciusInput.value);
        //Working out celcius to farenheight
        const fTemp = (cTemp * (9/5) + 32);

        //Working out celcius to kelvin
        const kTemp = (cTemp + 273.15);

        //Displaying the temperiture in all formats
        farenheightInput.value = fTemp;
        kelvinInput.value = kTemp;

        document.querySelectorAll('input[type=number]').forEach(function (node) {
            if (cTemp < 15) {
                node.style.color = 'blue';
            } else {
                node.style.color = 'red';
            }
        })
    }
    //Refreshing the screen when a number is put in
    celciusInput.addEventListener('input', celciusConverter);

@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    background: black;
}

div{
    height: 33.333vh;
}

#Farenheight{
    border-top: 5px;
    border-bottom: 5px;
}
input[type=number]{
    outline: none;
    width: 100%;
    height 100%;
    background: black;
    color: white;
    font-size: 6em;
    text-align: centre;
    border: 0;
    font-family: Oswald, sans-serif;
}

<body>

    <div id="celcius" class"temperature">
        <input type="number" placeholder="Celcius. . .">
    </div>

    <div id="farenheight" class"temperature">
        <input type="number" placeholder="Farenheight. . .">
    </div>

    <div id="kelvin" class"temperature">
        <input type="number" placeholder="Kelvin. . .">
    </div>

</body>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。