【前端入门】如何通过 JavaScript 操作 CSS？

Cammmi在努力
107 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第27天，点击查看活动详情

CSS 与 JavaScript 是两个有明确领域分工，前者负责页面的视觉效果，后者负责与用户的交互

HTML 元素的 style 属性

可以直接读写或删除网页元素的style属性的办法：getAttribute()、setAttribute()和removeAttribute()

style不仅可以使用字符串读写，它本身还是一个对象，可以直接读写个别属性

e.style.fontSize = '18px';
e.style.color = 'black';

CSS 对象

浏览器原生提供 CSS 对象，为 JavaScript 操作 CSS 提供一些工具方法

CSS.escape方法用于转义 CSS 选择器里面的特殊字符

CSSStyleDeclaration 接口

CSSStyleDeclaration 接口用来操作元素的样式，可以直接读写 CSS 的样式属性

例如

var divStyle = document.querySelector('div').style;

divStyle.backgroundColor = 'red';
divStyle.border = '1px solid black';
divStyle.width = '100px';
divStyle.height = '100px';

divStyle.backgroundColor // red
divStyle.border // 1px solid black
divStyle.height // 100px
divStyle.width // 100px

特别注意：Element.style返回的只是行内样式，并不是该元素的全部样式；元素的全部样式要通过window.getComputedStyle()得到

CSSStyleDeclaration 实例方法

  • CSSStyleDeclaration.getPropertyPriority方法接受 CSS 样式的属性名作为参数，返回一个字符串
  • CSSStyleDeclaration.getPropertyValue方法接受 CSS 样式属性名作为参数，返回一个字符串，表示该属性的属性值
  • CSSStyleDeclaration.item方法接受一个整数值作为参数，返回该位置的 CSS 属性名
  • CSSStyleDeclaration.removeProperty方法接受一个属性名作为参数，在 CSS 规则里面移除这个属性，返回这个属性原来的值
  • CSSStyleDeclaration.setProperty方法用来设置新的 CSS 属性。该方法没有返回值
    • 属性名，必需
    • 属性值，可选
    • 优先级，可选

写在最后

以上习题&笔记从大佬们的论坛学习而来，特感谢大佬们的知识分享～ （学习技术知识，果然要看大佬们的技术博客，大家有好的推荐也欢迎指引我这个小白哈，感恩！）

附上学习链接，感谢这些大佬出题和解答：wangdoc.com/javascript/…

avatar
文章
阅读
粉丝