我是 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>未捕获的类型错误:无法读取未定义的属性“样式” 在 HTMLInputElement.celciusConverter
最佳答案
颜色变化不起作用的原因是因为您的 temperature 类位于包装输入的 div 上，并且表单项(输入/文本区域/等)不从它们的继承字体信息默认为父级。使用 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>关于javascript - 使用 Javascript 更改类的 CSS 样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56918248/