19.从行内到类名：JavaScript 修改 CSS 样式的两种核心方式对比

目录一、获取/修改样式属性二、行内样式操作代码示例点击文字则放大字体。方式一方式二三、行内样式操作补充示例四、类名样式操作一、获取/修改样式属性CSS 中指定给元素的属性都可以通过 JS 来修改。二、行内样式操作语法element.style.[属性名] [属性值]; element.style.cssText [属性名属性值];说明“行内样式”通过 style 直接在标签上指定的样式。优先级很高。适用于改的样式少的情况。注意style 中的属性都是使用驼峰命名​ 的方式和 CSS 属性对应的。例如font-size fontSize,background-color backgroundColor等这种方式修改只影响到特定样式其他内联样式的值不变。代码示例点击文字则放大字体。方式一head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body div stylefont-size: 10px; onclickchangeSize()哈哈哈/div /body script function changeSize() { let element document.querySelector(div) console.log(element.style) let size parseInt(element.style.fontSize) 10 element.style.fontSize size px // console.log(typeof(size)) } /script方式二script function changeSize() { let element document.querySelector(div) console.log(element.style) let size parseInt(element.style.fontSize) 10 // element.style.fontSize size px element.style.cssText font-size: size px // console.log(typeof(size)) } /script三、行内样式操作补充示例说明“行内样式”通过 style 直接在标签上指定的样式。优先级很高。适用于改的样式少的情况。代码示例点击文字则放大字体。style 中的属性都是使用驼峰命名​ 的方式和 CSS 属性对应的。例如font-size fontSize,background-color backgroundColor等这种方式修改只影响到特定样式其他内联样式的值不变。head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style div { font-size: 10px; } /style /head body div onclickchangeSize()哈哈哈/div /body script function changeSize() { let element document.querySelector(div) console.log(element.style) let size parseInt(element.style.fontSize) 10 // element.style.fontSize size px element.style.cssText font-size: size px // console.log(typeof(size)) } /script(注此处标注“这种是无法实现效果的”指的是如果样式写在style标签内直接使用element.style.fontSize初始可能获取不到值需要结合getComputedStyle但此处仅展示代码结构)四、类名样式操作语法element.className [CSS 类名];说明修改元素的 CSS 类名。适用于要修改的样式很多的情况。由于 class 是 JS 的保留字所以名字叫做 className。代码示例开启夜间模式HTML 与 CSS 结构style .light { background-color: aliceblue; color: black; width: 100%; height: 100%; } body, html { width: 100%; height: 100%; } .dark { background-color: black; color: white; width: 100%; height: 100%; } /style body div classlight 这是一段话br 这是一段话br 这是一段话br 这是一段话br 这是一段话br 这是一段话br /div /bodyJS 切换逻辑body div classlight onclickchangeStyle() 这是一段话br 这是一段话br 这是一段话br 这是一段话br 这是一段话br 这是一段话br /div /body script function changeStyle() { let element document.querySelector(div) // 如果当前的样式是白天模式此时就将其样式切换成黑夜模式 // 否则就将当前样式调整成白天模式 console.log(element.className) if(element.className light) { element.className dark } else { element.className light } } /script