PJCHENder 未整理筆記

[WebAPIs] CSS Manipulation with JavaScript

2018-06-10

[WebAPIs] CSS Manipulation with JavaScript

@(JavaScript)[JavaScript, WebAPIs, CSS]

keywords: DOM, element, CSS, style

CSS Class

使用 classList 添加移除 class

keywords: element.classList
1
2
3
4
5
6
// 透過 classList 除了可以增減 class 之外,還可以取得 class 數目和名稱
el.classList.add('className', 'className2') // 新增多個 class
el.classList.remove('className')
el.classList.item(Number)
el.classList.toggle('className')
el.classList.contains('className')

使用 className 修改某一元素套用的 class

keywords: element.className

透過 className 這個屬性,可以直接設定(set)或取得(get)某一元素的 css class

1
2
const element = document.getElementById('item');
element.className = 'inactive';

Inline style

keywords: getPropertyValue(<property>), setProperty(<property>, <value>), removeProperty(<property>)
1
2
3
4
// 針對行內樣式(inline-style)
element.style.setProperty('--primary-btn-text-color', 'darkcyan'); // 設值
element.style.getPropertyValue('--primary-btn-text-color'); // 取值
element.style.removeProperty('--primary-btn-text-color'); // 移除值

取得元素 computed 後的樣式值

1
2
3
4
5
6
7
// 取得 computed 後的樣式
// getComputedStyle(element[, pseudoElt]).getPropertyValue('background-color')
getComputedStyle(<element>).getPropertyValue('--primary-btn-bg-color');

/*
fontSize=window.getComputedStyle(div,'::before').getPropertyValue('font-size');
*/

CSS 變數的操作(CSS custom properties / variables)

1
2
3
4
5
6
7
8
9
10
// 取值
HTMLelement.style.getProperty('--primary-btn-bg-color'); // inline-style
getComputedStyle('html-element').getPropertyValue('--primary-btn-bg-color'); // 取得 computed 後的結果

// 設值
HTMLElement.style.setProperty('<cssVariable>', '<value>');
HTMLElement.style.setProperty('--btn-primary-color', 'darkcyan');

// 移除
HTMLElement.style.removeProperty('--primary-btn-bg-color', 'red')

Using CSS custom properties (variables) @ MDN

參考

掃描二維條碼,分享此文章