JS是一種功能強大的編程語言,它可以通過DOM操作實現改變整個CSS的效果。在下面的代碼中,我們將介紹如何使用JS修改整個CSS。
// 獲取head元素 const head = document.querySelector('head'); // 創建style元素 const style = document.createElement('style'); // 將樣式寫入style標簽 style.innerHTML = 'body {background-color: #000; color: #fff;}'; // 將style元素添加到head元素中 head.appendChild(style);
在以上代碼中,我們通過document對象的querySelector方法獲取了head元素,然后創建了一個style元素,將要改變的樣式寫入其中。最后,將style元素添加到head元素中,這樣就實現了整個CSS的改變。
除了以上方法,我們還可以使用CSSStyleSheet接口,它提供了一種更簡單的方式來修改整個CSS。代碼如下:
// 獲取style元素 const style = document.querySelector('style'); // 獲取CSSStyleSheet對象 const sheet = style.sheet; // 修改樣式 sheet.insertRule('body {background-color: #000; color: #fff;}', 0);
以上代碼中,我們通過document對象的querySelector方法獲取了style元素,然后獲取了CSSStyleSheet對象。我們使用insertRule方法來修改樣式,第一個參數是要插入的樣式,第二個參數是要插入的位置。通過這種方法,我們也可以實現整個CSS的改變。