浏览器 - 设置样式

2019-12-10

描述

为指定的元素设置 CSS 样式。

提示

• 使用 element.style 为指定的元素设置 CSS 值
• 注意：不能通过直接给 style 属性设置字符串（如：elt.style = "color: blue;"）来进行 CSS 的设置。因为通过 style 属性返回的 CSSStyleDeclaration 对象是只读的，但 style 属性中具体的样式却可以用来设置样式。此外，由于 style 属性的设置不会影响到通过其他方式设置的其他 CSS 样式，因此通过单独的样式属性（如 elt.style.color = '...'）比用 elt.style.cssText = '...' 或者 elt.setAttribute('style', '...') 更加简便高效，除非你希望完全通过一个单独语句来设置元素的全部样式。

代码

const  setStyle  = (el, ruleName, val) => (el.style[ruleName] = val);

示例

将 P 元素的字体大小设置为 20px：

setStyle(document.querySelector('p'), 'font-size', '20px'); // The first <p> element on the page will have a font-size of 20px 

返回总目录

每天 30 秒系列之 JavaScript 代码