如何在一个函数中更改输入的 css 样式和一些文本？答案

【问题标题】：How to change css style of input and some text in one function?如何在一个函数中更改输入的 css 样式和一些文本？
【发布时间】：2014-09-12 19:36:20
【问题描述】：

我们有一些用户输入的数据

以及计算后的结果

那么是否可以同时更改文本的css样式（颜色和字体系列）“Fe”和输入的背景颜色？

我试过这个：

function convcase(word) { 
document.convert.Ca.value = BuckwheatCa * document.convert.Buckwheat.value
    if(document.convert.Fe.value < 10){
    document.getElementById("Fe_t").style.color="red";}
    else { document.getElementById("Fe_t").style.color="blue";
    };
}

但无法访问 Fe_b id 并且无法更改文本的字体系列

<td id='Fe_t'>Fe</td> <td id='Fe_b'><INPUT TYPE=TEXT NAME="Fe" DISABLED></td>

也许用 jquery 是可能的？

【问题讨论】：

什么意思“无法访问输入ID”？输入没有 id...
是的，你说得对，我的意思是无法访问 Fe_b id @T J
你能提供一个小提琴或 plunket 吗？
不幸的是，我的输入不适用于小提琴jsfiddle.net/urc_7/k1ass57v@mulla.azzi

标签： javascript jquery css dynamic colors

【解决方案1】：

您可以使用 jQuery 访问输入，例如 $("#Fe_b input")。您可以通过将包含 css 属性值的对象传递给 css() 函数来一次设置多个 css 属性：

function convcase(word) { 
 document.convert.Ca.value = BuckwheatCa * document.convert.Buckwheat.value
  if(document.convert.Fe.value < 10){
   $("#Fe_t").css("color","red");
   $("#Fe_b input").css({"background":"grey","font-family":"fantasy"});
  }
  else {
   $("#Fe_t").css("color","blue");
   $("#Fe_b input").css({"background":"white","font-family":"sans-serif"});
  };
}

【讨论】：

【解决方案2】：

使用纯 Javascript，您可以使用 getElementsByTabName 访问输入元素，如下所示：

document.getElementById("Fe_b").getElementsByTagName('input')[0].style.color = 'red';

您将获得一个输入元素数组，并使用[0] 选择第一个。

【讨论】：