使用JavaScript更改类的CSS样式

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：无法读取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 个解决方案

解决方案1
1 已采纳 2019-07-07 01:04:57

解决方案2
-1 2019-07-06 23:26:27

使用JavaScript更改类的CSS样式

问题描述

2 个解决方案

解决方案1 1 已采纳 2019-07-07 01:04:57

解决方案2 -1 2019-07-06 23:26:27

解决方案1
1 已采纳 2019-07-07 01:04:57

解决方案2
-1 2019-07-06 23:26:27