使用JavaScript更改类的CSS样式
[英]Changing CSS style of a class with Javascript
问题描述
I'm new to javascript and I'm coding a temperiture converter. 
我是javascript新手，正在编写温度转换器。 The program is basically done except im trying to make it so that the color of the text changes depending on the value of the temperiture. 该程序基本上完成了，只是我试图使其变色，以使文本的颜色根据温度的值而变化。 Eg: its 3 Degrees celcius so the text is blue to show that it's cold. 例如：其摄氏3度，因此文本为蓝色表示很冷。
I added a class called temperiture to all of the I want the colour to change on. 我给所有想要改变颜色的类都添加了一个称为温度的类。 I've tried document.getElementByClassName aswell as document.QuerySelector. 我已经尝试了document.getElementByClassName以及document.QuerySelector。
The class 'temperature' has not been touched in the CSS file CSS文件中未涉及“温度”类
This error is shown twice for the same line: 同一行两次显示此错误：
//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>
Uncaught TypeError: Cannot read property 'style' of undefined at HTMLInputElement.celciusConverter 未捕获的TypeError：无法读取HTMLInputElement.celciusConverter上未定义的属性“样式”
2 个解决方案
解决方案1
1 已采纳 2019-07-07 01:04:57
The reason why the color change was not working is because your temperature class was on the divs wrapping the inputs, and form items (inputs/textarea/etc) don't inherit font information from their parent by default. 颜色更改无法正常工作的原因是，您的temperature类位于包装输入的div上，并且表单项（输入/ textarea / etc）默认情况下不会从其父级继承字体信息。 Using querySelectorAll , you can use the input[type=number] selector, just like you did in your css. 使用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>
解决方案2
-1 2019-07-06 23:26:27
The selector is incorrect. 选择器不正确。 Don't put the # in front of the class name. 不要在班级名称的前面加上# 。 getElementsByClassName just expects a string identical to the class name. getElementsByClassName只需要一个与类名相同的字符串。
if (cTemp < 15){
document.getElementsByClassName('temperature')[0].style.color='black';
}
even better, I like to use querySelectorAll instead, which expects css like selectors. 更好的是，我更喜欢使用querySelectorAll ，它希望CSS像选择器一样。 I also assume you want to update the style of all of the .temperature elements. 我还假设您要更新所有.temperature元素的样式。 You can iterate over all of them instead of only updating the first one. 您可以遍历所有这些对象，而不仅仅是更新第一个。
document.querySelectorAll('.temperature').forEach(function (node) {
if (cTemp < 15) {
node.style.color = 'blue';
} else {
node.style.color = 'red';
}
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.