访问特定css选择器属性的javascript

我有一个css文件

.datagrid table tbody td { color: #00496B; border-left: 1px solid
    #E1EEF4; font-size: 16px ;font-weight: normal; }

如何使用javascript动态更改字体大小？ 以下代码适用于所有td，但如何访问.datagrid下的特定td？ 感谢您的帮助

css('td', 'font-size', '9px');
function css(selector, property, value) {
      for (var i=0; i<document.styleSheets.length;i++) {//Loop through all styles
          //Try add rule
          try { document.styleSheets[i].insertRule(selector+ ' {'+property+':'+value+'}', document.styleSheets[i].cssRules.length);
          } catch(err) {try { document.styleSheets[i].addRule(selector, property+':'+value);} catch(err) {}}//IE
      }
}

css（'td'，'font size'，'9px'）；
函数css（选择器、属性、值）{
对于（var i=0；i而不是遍历CSS，您可以使用
document.getElementById
来选择元素（如果该元素具有唯一的ID），否则您可以使用
getElementByTagName
，如下所示：

document.getElementsByTagName('div')[0] //the first div in the document
document.getElementsByTagName('div')[1] //the second div... etc...

然后您可以更改内联css，例如

否则，如果您不想插入内联样式，可以使用
document.styleSheets[index]
访问外部CSS，如果您有多个样式集，则使用index，否则只需使用
document.styleSheets[0]
，则规则位于另一个数组中，即
cssRules[index]
因此，例如，使用
document.styleSheets[0].cssRules[0]
可以选择第一个外部CSS的第一个规则。
映射CSS规则的最简单方法是使用querySelectorAll:

document.querySelectorAll(".datagrid table tbody td")

这在所有最近的浏览器中都受支持

如果目标是单个元素：

document.querySelector(".datagrid table tbody td")

要修改此特定元素的字体大小，请执行以下操作：

document.querySelector(".datagrid table tbody td").style.fontSize="12px";

您没有使用选择器
.datagrid table tbody td
进行尝试？动态更改所有表的字体大小的最简单方法是让数据网格从容器继承字体大小，并将容器的
类更改为指定更大字体的类。类似地，更改单个单元格，只需添加一个类（比如说
highlight
），该类将为其提供更大的字体
td.highlight{font size:20px；}
document.querySelector(".datagrid table tbody td").style.fontSize="12px";