javascript - 使用 Javascript 更改类的 CSS 样式
问题描述
我是 javascript 新手,我正在编写温度转换器。该程序基本上已完成,除了我试图使其文本的颜色根据温度的值而变化。例如:它的 3 摄氏度,所以文本是蓝色的,表明它很冷。
我为所有我想要改变颜色的对象添加了一个名为 tempiture 的类。我已经尝试过 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>
推荐阅读
- r - 一列的值基于R中另一列的值
- mysql - 如何在 MySQL 中使用自定义逻辑 IF 语句比较两列之间的值
- python - SQLAlchemy 删除父级既不删除子级也不将子级 ForeignKey 值设置为 null
- python - ValueError:无法将输入数组从形状 (11253,1) 广播到形状 (11253)
- amazon-web-services - 在 AWS X-Ray 中手动传播上游下游关系
- angularjs - 未捕获的错误:[jqLite:nosel] http://errors.angularjs.org/1.5.11/jqLite/nosel & 警告:尝试多次加载 Angular
- angular - 我们可以使用 App_Initializer 调用 Http POST 服务调用吗?
- c# - C# 枚举索引行为
- wpf - 如何在 XAML 中获取父列表框项的引用?
- php - Laravel如何通过迁移制作新的数据库表