原生JS是一種強大的編程語言,可以用它來控制HTML元素的樣式,下面我們來看一下如何用原生JS設置CSS。
首先,我們需要選中要設置樣式的HTML元素,可以使用document.getElementById()、document.getElementsByClassName()、document.getElementsByTagName()等方法。
// 選中一個id為demo的元素
const demo = document.getElementById('demo');
// 選中class為box的所有元素
const boxes = document.getElementsByClassName('box');
// 選中所有p元素
const paragraphs = document.getElementsByTagName('p');
選中元素后,我們可以使用style屬性來設置CSS,比如修改元素的寬度和背景顏色:
// 修改寬度和背景顏色
demo.style.width = '200px';
demo.style.backgroundColor = 'red';
此外,我們還可以使用classList屬性來添加、刪除、切換元素的class:
// 添加class
demo.classList.add('active');
// 刪除class
demo.classList.remove('active');
// 切換class
demo.classList.toggle('active');
以上就是用原生JS設置CSS的方法,很簡單吧,趕快去嘗試吧!