使用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