在網(wǎng)頁開發(fā)中,JavaScript是一門不可缺少的語言。除了定義交互行為外,它也可以用來處理CSS。下面我們來看看JS對CSS的處理。
// 選取元素并修改樣式 let elem = document.querySelector('.box'); elem.style.backgroundColor = 'red'; // 添加和移除類 elem.classList.add('active'); elem.classList.remove('active'); // 獲取元素的ComputedStyle let style = window.getComputedStyle(elem); console.log(style.backgroundColor); // 獲取和設(shè)置元素的屬性值 let input = document.querySelector('input[type="text"]'); console.log(input.value); input.value = '這是新的值'; // 動態(tài)創(chuàng)建樣式表和規(guī)則 let styles = document.createElement('style'); document.head.appendChild(styles); styles.sheet.insertRule('.box {width: 100px; height: 100px;}', 0); // 獲取和設(shè)置CSS變量 elem.style.setProperty('--color', 'blue'); console.log(getComputedStyle(elem).getPropertyValue('--color'));
以上代碼演示了JS如何選取元素并修改樣式、添加和移除類、獲取元素的ComputedStyle、獲取和設(shè)置元素的屬性值、動態(tài)創(chuàng)建樣式表和規(guī)則以及獲取和設(shè)置CSS變量。
通過以上例子,我們可以看到JS可以在頁面加載后動態(tài)修改CSS,實(shí)現(xiàn)動態(tài)更新頁面、改變交互效果等功能,使得網(wǎng)頁更加生動有趣。
上一篇js批量替換css
下一篇css里dotted