原生JavaScript读写CSS样式的方法

简介: 原生JavaScript读写CSS样式的方法

前言


好久没用原生 js 读写CSS样式,差点忘了,记录一下!


正文


  1. 通过 DOM 节点对象的style对象

var element = document.getElementById('id');
element.style.color = 'red';


  1. 通过 Element 对象的 setAttribute()、getAttribute()、removeAttribute() 方法

var element = document.getElementById('id');
element.setAttribute('color', 'red')


  1. 通过 style 对象的 cssText 属性、setProperty()、removeProperty() 方法

var element = document.getElementById('id');
element.style.cssText = 'color: red';
element.style.setProperty('color', 'red', 'important');
element.style.removeProperty('color');
element.style.cssText = '';  // 快速清空该规则的所有声明


  1. 直接添加样式表
    1) 创建 <style> 标签,内联样式

var style = document.createElement('style');
style.innerHTML = 'body{color: red}';
document.head.appendChild(style);


2)  添加外部样式表

var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', 'reset-min.css');
document.head.appendChild(link);


  1. 还有很多…
目录
相关文章
|
13天前
|
存储 JavaScript 索引
JS中数组的相关方法介绍
JS中数组的相关方法介绍
|
13天前
|
JavaScript 前端开发 索引
JavaScript中与字符串相关的方法
JavaScript中与字符串相关的方法
|
3天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
7天前
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
js 垃圾回收机制的方法
|
7天前
|
JavaScript 前端开发
js数据类型有几类?一共有几种?判断数据类型的方法是什么?
js数据类型有几类?一共有几种?判断数据类型的方法是什么?
|
8天前
|
JavaScript 前端开发
js绑定事件的方法
js绑定事件的方法
22 11
|
8天前
|
前端开发
css中几种隐藏元素的方法
css中几种隐藏元素的方法
11 0
|
8天前
|
JavaScript
JS生成uuid的四种方法
JS生成uuid的四种方法
10 0
|
8天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
16 0
|
12天前
|
Web App开发 前端开发 开发者
css检查方法
【4月更文挑战第13天】css检查方法
14 2