Question

我在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
      }
}

Answer 1

如果元素具有唯一ID，您可以使用document.getElementById来选择元素，而不是遍历CSS，否则您可以使用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"

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

Answer 2

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

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

所有最近的浏览器都支持此功能。

如果您要定位单个元素：

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

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

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

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

2 个答案: