2

我在一个 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
      }
}
4

2 回答 2

1

如果元素具有唯一 ID，则可以使用它来选择元素，而不是遍历 CSS，document.getElementById否则可以使用getElementByTagName如下：

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

然后你可以改变内联css，例如<div id="mydiv" style="width: 200px;">

document.getElementById('mydiv').style.width = "200px"

否则，如果您不想插入内联样式，则可以使用 访问外部 CSS document.styleSheets[index]，如果您有多个样式表，则使用 index ，否则只需使用document.styleSheets[0]，则规则位于另一个数组中，cssRules[index]例如与document.styleSheets[0].cssRules[0]您选择第一个外部 CSS 的第一个规则。

于 2012-11-24T02:26:50.373 回答
1

映射 css 规则的最简单方法是使用 querySelectorAll：

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

所有最近的浏览器都支持这一点。

如果您针对单个元素：

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

并修改此特定元素的字体大小：

document.querySelector(".datagrid table tbody td").style.fontSize="12px";
于 2012-11-24T02:39:16.710 回答