文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载在 Modern JavaScript Tutorial本仓库的2-ui/1-document章节中Styles and classes一课系统讲解了 JavaScript 操作元素样式与 CSS 类的全部手段。读完本文你将掌握四条核心能力用className整体替换类名、用classList精确增删切换单个类、通过style对象与style.cssText写入内联样式以及用getComputedStyle读取 CSS 级联之后的最终计算值。本文还会结合仓库中随章节附带的创建通知Create a notification实战任务任务说明给出完整可运行的代码示例。样式操作的第一原则优先用 CSS 类而不是 style在深入 JavaScript 的样式 API 之前先记住一条贯穿始终的重要规则Web 中有两种给元素加样式的方式——在 CSS 中定义一个类然后把类加到元素上div class...直接把样式属性写进style属性div style...。JavaScript 可以同时修改类与style属性但我们应当始终优先使用 CSS 类style只应在类搞不定的场景下使用。最典型的合理场景是动态计算坐标例如运行时算出了元素的位置需要从 JavaScript 直接写入let top /* 复杂计算 */; let left /* 复杂计算 */; elem.style.left left; // 例如 123px运行时计算得出 elem.style.top top; // 例如 456px而像把文字变红加一个背景图标这类静态外观需求应当写进 CSS再通过 JavaScript 添加对应的类。这样更灵活、更易于维护——样式与逻辑分离改外观时不需要动 JS 代码。className操作完整的类名字符串改类是脚本中最常见的操作之一。这里有一段历史背景早期 JavaScript 中存在一个限制保留字如class不能作为对象属性名。虽然这个限制如今已不存在但在当时无法使用elem.class这样的写法。于是引入了外观相近的classNameelem.className与 HTML 的class属性一一对应。body classmain page script alert(document.body.className); // main page /script /body注意给elem.className赋值会整体替换整个类名字符串。有些场景这正是我们想要的但更多时候我们只想增删某一个类。此时应该使用另一个属性classList。classList精确操作单个类elem.classList是一个特殊对象提供add/remove/toggle等操作单个类的方法body classmain page script // 添加一个类 document.body.classList.add(article); alert(document.body.className); // main page article /script /bodyclassList的方法清单elem.classList.add(class)/elem.classList.remove(class)—— 添加 / 移除该类elem.classList.toggle(class)—— 类不存在则添加存在则移除elem.classList.contains(class)—— 检查是否包含该类返回true/false。此外classList是可迭代的可以用for..of遍历列出所有类body classmain page script for (let name of document.body.classList) { alert(name); // 先弹出 main再弹出 page } /script /body因此实践中的选择标准很清晰需要整体管理类的集合时用className需要增删单个类时用classList。elem.style对应 style 属性的内联样式对象elem.style是一个对象与style属性中写入的内容一一对应。elem.style.width 100px等价于在style属性里写上width:100px。对于多词属性名JavaScript 中使用驼峰命名camelCasebackground-color elem.style.backgroundColor z-index elem.style.zIndex border-left-width elem.style.borderLeftWidth例如document.body.style.backgroundColor prompt(background color?, green);浏览器厂商前缀属性也遵循同样的规则中划线代表后面要大写。例如-moz-border-radius、-webkit-border-radius分别写作button.style.MozBorderRadius 5px; button.style.WebkitBorderRadius 5px;重置样式属性赋空字符串或 removeProperty有时我们设置了一个样式属性稍后又想把它移除。例如要隐藏元素可以设置elem.style.display none之后想恢复原状不能写delete elem.style.display而应赋空字符串// 如果运行这段代码body 会闪烁一下 document.body.style.display none; // 隐藏 setTimeout(() document.body.style.display , 1000); // 恢复正常把style.display设为空字符串后浏览器会像从未设置过该属性一样正常应用 CSS 类与内置样式。还有一个专门的方法elem.style.removeProperty(style property)document.body.style.background red; // 把背景设为红色 setTimeout(() document.body.style.removeProperty(background), 1000); // 1 秒后移除背景整体重写style.cssText通常我们用style.*逐个赋值属性。我们不能直接写div.style color: red; width: 100px因为div.style是对象且只读。要整体写入一串样式字符串需要使用特殊属性style.cssTextdiv iddivButton/div script // 这里甚至可以设置 !important 这样的特殊标记 div.style.cssTextcolor: red !important; background-color: yellow; width: 100px; text-align: center; ; alert(div.style.cssText); /script需要注意cssText的赋值是整体替换而非追加会清除所有已有内联样式偶尔会误删我们需要保留的属性。所以它只适合用于确定不会破坏现有样式的场景例如给新建元素一次性初始化全部样式。同样的效果也可以通过设置属性实现div.setAttribute(style, color: red...)。别忘加单位给样式属性赋值时不要忘记添加 CSS 单位。例如不能把elem.style.top设为10而应设为10px否则赋值会被忽略body script // 不生效 document.body.style.margin 20; alert(document.body.style.margin); // 空字符串赋值被忽略 // 加上 CSS 单位 px 之后才生效 document.body.style.margin 20px; alert(document.body.style.margin); // 20px alert(document.body.style.marginTop); // 20px alert(document.body.style.marginLeft); // 20px /script /body注意上例的最后两行浏览器会拆解style.margin自动推断出style.marginLeft、style.marginTop等具体属性。读取样式getComputedStyle写样式很容易但读取呢例如想知道某个元素的尺寸、外边距或颜色。关键前提是style属性只作用于style属性里的值完全无视 CSS 级联cascade。也就是说用elem.style读不到任何来自 CSS 类的样式。下面的例子中style就读不到 CSS 定义的 marginhead style body { color: red; margin: 5px } /style /head body The red text script alert(document.body.style.color); // 空 alert(document.body.style.marginTop); // 空 /script /body但假如我们需要把 margin 增加 20px这类操作就必须先拿到当前值。这时要用getComputedStyle语法如下getComputedStyle(element, [pseudo])element—— 要读取样式的元素pseudo—— 如需读取伪元素则传入例如::before空字符串或不传表示元素本身。返回值是一个类似elem.style的对象但考虑到了所有 CSS 类完整的级联结果head style body { color: red; margin: 5px } /style /head body script let computedStyle getComputedStyle(document.body); // 现在可以读到 margin 和 color 了 alert( computedStyle.marginTop ); // 5px alert( computedStyle.color ); // rgb(255, 0, 0) /script /body计算值computed与解析值resolved的区别CSSOM 中有两个相关概念计算值computed value所有 CSS 规则与继承应用之后、级联完成的取值可能是height:1em、font-size:125%这类相对形式解析值resolved value最终实际应用到元素上的值。浏览器把1em、125%等相对单位换算为固定、绝对的单位例如height:20px、font-size:16px。几何属性还可能带有浮点数如width:50.5px。早年getComputedStyle是为获取计算值而设计的但实践中解析值方便得多标准也随之演进。因此如今getComputedStyle实际返回的是属性的解析值几何属性通常以px呈现。必须使用完整的属性名调用getComputedStyle时应始终指定想要的精确属性如paddingLeft、marginTop或borderTopWidth否则结果不保证正确。例如同时存在paddingLeft/paddingTop时getComputedStyle(elem).padding到底返回什么标准里没有统一规则可能是空也可能是生成的值。:visited 链接的样式被隐藏被访问过的链接可以用:visited伪类着色但getComputedStyle读不到这个颜色——否则任意网页都能通过在页面中创建链接并检查样式来探测用户是否访问过某个网址。JavaScript 无法看到:visited应用的样式同时 CSS 也禁止在:visited中修改几何相关样式从两端共同保证用户浏览历史的隐私不被恶意页面探测。仓库实战用 className、classList 与 style 实现通知组件本仓库为该章节附带的练习题Create a notificationtask.md正好把本文的知识点串起来要求实现showNotification(options)函数创建一个div classnotification元素1.5 秒后自动消失并支持指定top、right坐标、HTML 内容与附加类名。完整参考实现位于 solution.view/index.html核心代码function showNotification({top 0, right 0, className, html}) { let notification document.createElement(div); notification.className notification; // 整体设置基础类 if (className) { notification.classList.add(className); // 用 classList 追加可选类 } notification.style.top top px; // 记得拼上单位 notification.style.right right px; notification.innerHTML html; document.body.append(notification); setTimeout(() notification.remove(), 1500); }对照本文的知识点这段代码展示了几处关键实践className与classList配合先用className一次性设定基础类notification再用classList.add追加可选的welcome类——正是整体管理与单个增删两种工具的分工动态坐标用style写入top、right是运行时参数属于第一节所说的类搞不定的场景通过style.top top px动态赋值单位意识top px严格拼接了 CSS 单位避免了没写单位导致赋值被忽略的经典坑。配套样式写在 solution.view/index.cssnotification类用position: fixed把元素钉在窗口坐标系中z-index: 1000保证置顶welcome类则负责配色.notification { position: fixed; z-index: 1000; padding: 5px; border: 1px solid black; font-size: 20px; background: white; text-align: center; } .welcome { background: #b80000; color: yellow; }测试代码每隔 2 秒调用一次showNotification在页面右上角持续弹出 Hello 1、Hello 2… 的通知直观验证了类负责外观、内联样式负责动态坐标的分工模式。扩展阅读与相邻章节的衔接本章的样式 API 是后续 DOM 操作的基础下一章 Element size and scrolling 继续讲解offsetWidth/offsetHeight、clientWidth、scrollWidth等几何属性其中的关键前提正是本章强调的几何属性只对已显示元素有效display:none的元素所有几何值为 0。而创建、插入元素所使用的document.createElement、append等 API 则在本教程的 Modifying the document 一章中详细展开。小结管理类有两个 DOM 属性className是字符串适合整体管理类集合classList是带有add/remove/toggle/contains方法的对象适合操作单个类且可迭代。修改样式style是驼峰命名的样式对象读写它等价于修改style属性中的单个属性style.cssText对应整个style属性可整体写入一串样式会替换而非追加。读取最终样式getComputedStyle(elem, [pseudo])返回考虑全部 CSS 类、级联计算完成后的样式对象且为只读调用时应使用完整属性名且无法读取:visited对链接施加的颜色。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐Shadow DOM Slots and Composition in Modern JavaScript Tutorial: Building Composable Web ComponentsShadow DOM Slots and Composition in Modern JavaScript Tutorial: Building Composa文档/教程前端使用 classList 检查 DOM 元素的 CSS 类使用 classList 检查 DOM 元素的 CSS 类 Element.classList 是浏览器原生提供的 DOMTokenList 接口它把元素 c文档教程知识库用 Flower AgentApp 构建协作研究 Agent有界工具循环、对话回放与连接器容错实战用 Flower AgentApp 构建协作研究 Agent有界工具循环、对话回放与连接器容错实战 本教程以 Flower 开源框架的 AgentApp 运行文档/教程前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考