js修改css样式

// 示例代码：使用 JavaScript 修改 CSS 样式

// 1. 通过修改元素的 style 属性来直接设置样式
const element = document.getElementById('myElement');
element.style.color = 'blue';  // 将元素的文字颜色设置为蓝色
element.style.fontSize = '20px';  // 设置字体大小为20像素

// 2. 通过添加或移除类名来修改样式
element.classList.add('highlight');  // 添加一个名为 'highlight' 的类
element.classList.remove('oldClass');  // 移除一个名为 'oldClass' 的类

// 3. 使用 getElementsByTagName 或 querySelector 获取多个元素并修改样式
const paragraphs = document.getElementsByTagName('p');
for (let i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.backgroundColor = 'yellow';  // 将所有 <p> 元素的背景色设置为黄色
}

// 4. 使用 setAttribute 方法修改内联样式或属性
document.querySelector('#myDiv').setAttribute('style', 'border: 1px solid red;');  // 设置 div 的边框样式

// 解释说明：
// 上述代码展示了如何通过 JavaScript 动态修改页面中元素的 CSS 样式。可以通过直接修改元素的 style 属性、添加或移除类名、批量修改多个元素的样式，或者使用 setAttribute 方法来实现。