js如何修改html样式表

要使用JavaScript修改HTML样式表，可以通过以下步骤实现：

1、获取样式表元素，可以使用document.styleSheets属性来获取文档中的所有样式表，然后通过索引或其他方法选择特定的样式表。

2、修改样式表中的CSS规则，可以使用insertRule()或addRule()方法向样式表中添加新的CSS规则，或者使用deleteRule()方法删除现有的CSS规则。

下面是一个详细的示例，演示如何使用JavaScript修改HTML样式表：

// 获取样式表元素
var styleSheet = document.styleSheets[0]; // 假设我们要修改第一个样式表
// 添加新的CSS规则
styleSheet.insertRule('body { backgroundcolor: red; }', 0); // 将body的背景颜色设置为红色
// 修改现有CSS规则
for (var i = 0; i < styleSheet.cssRules.length; i++) {
    var rule = styleSheet.cssRules[i];
    if (rule.selectorText === 'h1') {
        rule.style.fontSize = '24px'; // 将h1标签的字体大小设置为24像素
    }
}
// 删除CSS规则
for (var i = styleSheet.cssRules.length 1; i >= 0; i) {
    var rule = styleSheet.cssRules[i];
    if (rule.selectorText === 'p') {
        styleSheet.deleteRule(i); // 删除所有p标签的CSS规则
    }
}

在上面的示例中，我们首先获取了文档中的第一个样式表，然后使用insertRule()方法向其中添加了一个新的CSS规则，将body的背景颜色设置为红色，接下来，我们遍历样式表中的所有CSS规则，找到匹配h1标签的规则，并将其字体大小设置为24像素，我们再次遍历样式表中的所有CSS规则，找到匹配p标签的规则，并使用deleteRule()方法将其删除。

请注意，上述示例中的代码仅适用于内联样式表，如果要修改外部样式表，需要先加载该样式表，然后再执行上述操作。