如何通过JavaScript为页面元素添加指定CSS样式？

方法1：创建全局样式标签（推荐批量应用） #

直接生成<style>标签并插入到页面<head>中，效果和在CSS文件里编写样式一致，会作用于所有匹配.table子元素的节点：

// 定义要添加的CSS内容
const tableStyles = `
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, 
.table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}
`;

// 创建style元素
const styleElement = document.createElement('style');
styleElement.textContent = tableStyles;

// 插入到head标签中
document.head.appendChild(styleElement);

方法2：遍历元素设置内联样式 #

如果只想给特定的目标元素单独应用样式（避免全局影响），可以先选中所有匹配的元素，再逐个设置内联样式：

// 选中所有符合选择器的元素
const tableCells = document.querySelectorAll('.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td');

// 遍历元素并设置样式
tableCells.forEach(cell => {
    cell.style.padding = '8px';
    cell.style.lineHeight = '1.42857143';
    cell.style.verticalAlign = 'top';
    cell.style.borderTop = '1px solid #ddd';
});

注意：方法2的内联样式优先级高于全局样式，如果页面已有同名样式，内联样式会覆盖全局规则。

内容的提问来源于stack exchange，提问作者calupcasio