Question

我是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：无法读取未定义的属性'style' 在HTMLInputElement.celciusConverter

Answer 1

无法进行颜色更改的原因是因为您的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>

Answer 2

选择器不正确。不要将#放在类名的前面。 getElementsByClassName只需要一个与类名相同的字符串。

  if (cTemp < 15){
    document.getElementsByClassName('temperature')[0].style.color='black';
  }

更好的是，我更喜欢使用querySelectorAll，它期望CSS像选择器一样。我还假设您想更新所有.temperature元素的样式。您可以遍历所有这些对象，而不仅仅是更新第一个。

  document.querySelectorAll('.temperature').forEach(function (node) {
    if (cTemp < 15) {
      node.style.color = 'blue';
    } else {
      node.style.color = 'red';
    }
  })

使用JavaScript更改类的CSS样式

2 个答案: