🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 链滴笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

浏览器 - 设置样式

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 代码


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

5 评论
Lee981265 • 2019-12-11
回复 删除

这样的 fontSize 驼峰支持吗
setStyle(document.querySelector('p'), 'fontSize', '20px');

Lee981265 • 2019-12-11
回复 删除

刚刚试了一下可以
image.png

Vanessa • 2019-12-11
回复 删除

我一直用的都是驼峰

Adrift001 • 2019-12-12
回复 删除

我天,我说的话都让你截图了...

Lee981265 • 2019-12-12
回复 删除

测试一下而已 😄