JavaScript 中的样式与 CSS 操作

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2025年7月6日 14:14 本文热度 90

今天我就来跟大家聊聊 JavaScript 中操作样式的各种方法, 从最基础的 style 属性操作, 到现代 CSS-in-JS 方案，咱们一步步来.

一、最直接的方式-操作元素的style属性

1）基本用法:

当我们想用 JavaScript 直接修改一个元素的样式时,最直接的方法就是操作它的 style 属性:

const button = document.getElementById('myButton');button.style.backgroundColor = 'blue';button.style.color = 'white';button.style.padding = '10px 20px';

这样操作后, 元素上就会添加内联样式, 优先级非常高 , 会覆盖外部 CSS 文件中的样式.

2）注意事项:

* 属性名转换:CSS 属性中的连字符(如 background-color)在 JavaScript中要改为驼峰命名(backgroundColor).

* 单位不能少:像 width、height、margin 这样的属性必须带上单位:

//正确element.style.width = '100px';
//错误-这样不会生效element.style.width = 100;

* 批量设置: 可以用cssText一次性设置多个样式:

element.style.cssText = 'width: 100px; height: 200px; background: red;';//这会覆盖之前的所有内联样式

3）一个实际应用的场景,内联样式最适合用在需要动态计算的样式上,比如:

//根据数据动态设置进度条宽度const progress = document.getElementById('progress');progress.style.width = `${currentProgress}%`;
//鼠标跟随效果document.addEventListener('mousemove', (e) => {  const follower = document.getElementById('follower');  follower.style.left = `${e.clientX}px`;  follower.style.top = `${e.clientY}px`;});

二、获取计算后的样式: getComputedStyle

有时候我们需要获取元素最终渲染的样式(包括来自 CSS 文件的样式),这时候就需要 getComputedStyle 出场了.

const element = document.getElementById('myElement');const computedStyle = window.getComputedStyle(element);
console.log(computedStyle.width); //获取计算后的宽度console.log(computedStyle.backgroundColor); //获取计算后的背景色

特点:

只读:getComputedStyle 返回的对象是只读的, 不能通过它修改样式.
获取所有属性:它会返回元素所有 CSS 属性的计算值, 即使你没设置过.
包含最终值:比如你设置了width: 50%, 它会返回计算后的像素值.

实际应用示例:

//检查元素是否隐藏function isHidden(element) {  return window.getComputedStyle(element).display === 'none';}
//获取元素的实际宽度(包括padding和border)function getElementActualWidth(element) {  const style = window.getComputedStyle(element);  return (    parseFloat(style.width) +    parseFloat(style.paddingLeft) +    parseFloat(style.paddingRight) +    parseFloat(style.borderLeftWidth) +    parseFloat(style.borderRightWidth)  );}

三、比起直接操作样式, 更推荐的做法是通过添加/移除 CSS 类来控制样式

1) 现代 JavaScript 提供了强大的classList API:

const box = document.getElementById('box');
//添加类box.classList.add('active', 'highlighted');
//移除类box.classList.remove('highlighted');
//切换类(有则移除,无则添加)box.classList.toggle('active');
//检查是否包含某个类if (box.classList.contains('active')) {  console.log('元素有active类');}
//替换类box.classList.replace('old-class', 'new-class');

优点:

性能更好: 浏览器可以优化类名的变化
更易维护: 样式定义保持在 CSS 文件中
支持复杂样式: 可以一次性应用多个样式规则
支持伪类和媒体查询: 这些在 JavaScript 中无法直接设置

2) 一个实际应用示例:

//实现一个简单的选项卡切换const tabs = document.querySelectorAll('.tab');const panels = document.querySelectorAll('.panel');
tabs.forEach(tab => {  tab.addEventListener('click', () => {    //移除所有active类    tabs.forEach(t => t.classList.remove('active'));    panels.forEach(p => p.classList.remove('active'));
    //添加active类到当前tab和对应panel    tab.classList.add('active');    const panelId = tab.getAttribute('data-panel');    document.getElementById(panelId).classList.add('active');  });});

四、有时候我们需要更动态地控制样式, 比如添加或修改整个样式规则

1) 创建新的样式表:

const style = document.createElement('style');style.textContent = `  .highlight {    background-color: yellow;    border: 2px solid orange;  }`;document.head.appendChild(style);

2）修改现有的样式表:

// 获取第一个样式表const stylesheet = document.styleSheets[0];
// 添加新规则stylesheet.insertRule('.error { color: red; }', stylesheet.cssRules.length);
// 删除规则stylesheet.deleteRule(0); // 删除第一条规则

五、现代 CSS-in-JS 方案简介

随着前端框架的流行,CSS-in-JS方案越来越受欢迎. 它们允许我们在JavaScript中编写 CSS, 并提供了许多强大功能.

CSS-in-JS是一种将CSS直接写在 JavaScript 文件中的技术,它通常有以下特点:

局部作用域样式(避免全局污染)
自动添加浏览器前缀
支持基于props的动态样式
自动处理关键CSS和代码分割

1) styled-components示例:

import styled from 'styled-components';
//创建一个带样式的按钮组件const Button = styled.button`  background: ${props => props.primary ? 'blue' : 'white'};  color: ${props => props.primary ? 'white' : 'blue'};  padding: 10px 20px;  border: 2px solid blue;  border-radius: 4px;
  &:hover {    opacity: 0.8;  }`;
//使用<Button primary>主要按钮</Button><Button>次要按钮</Button>

2）Emotion示例:

/** @jsxImportSource @emotion/react */import { css } from '@emotion/react';
const style = css`  background: blue;  color: white;  padding: 10px 20px;
  &:hover {    opacity: 0.8;  }`;
function MyComponent() {  return <button css={style}>点击我</button>;}

阅读原文：原文链接

该文章在 2025/7/7 11:31:40 编辑过

关键字查询

CSS

样式

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。