es6 js 设置html样式

在es6中，我们可以使用新的语法和方法来设置html样式，使代码更加简洁易懂。以下是一些常用的方法。

// 选取元素并设置样式const element = document.querySelector('#element');
    element.style.color = 'red';
    element.style.background = 'yellow';
    // 批量设置样式const elements = document.querySelectorAll('.elements');
    elements.forEach(element =>
{
    element.style.color = 'blue';
}
    );
    // 使用class设置样式const elementWithClass = document.querySelector('.element-with-class');
    elementWithClass.classList.add('active');
     // 添加classelementWithClass.classList.remove('active');
     // 移除classelementWithClass.classList.toggle('active');
     // 添加/移除class// 组合样式const elementWithMultipleStyles = document.querySelector('#element-with-multiple-styles');
Object.assign(elementWithMultipleStyles.style, {
color: 'red',background: 'yellow',fontSize: '20px'}
    );
    

以上代码演示了使用es6语法和方法设置html元素样式的几种方法。通过选取元素并设置样式、批量设置样式、使用class设置样式和组合样式等方式，可以使代码更加简洁易懂，提高开发效率。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！