如果你想改變你的網(wǎng)站的外觀,你肯定要改變CSS。但是,如果你想測(cè)試一個(gè)新的CSS,你該怎么辦呢?這時(shí),切換css link就是個(gè)好辦法了。
首先,在head標(biāo)簽中添加兩個(gè)link標(biāo)簽,分別指向要切換的兩個(gè)CSS文件:
```html......```
其中,第二個(gè)link標(biāo)簽加了一個(gè)`disabled`屬性,表示這個(gè)CSS不會(huì)被應(yīng)用到頁(yè)面上。
然后,在JS代碼中,找到要切換的link標(biāo)簽,把它的`disabled`屬性切換:
```javascript
function switchCSS() {
var css1 = document.getElementsByTagName("link")[0];
var css2 = document.getElementsByTagName("link")[1];
if (css1.disabled) {
css1.disabled = false;
css2.disabled = true;
} else {
css1.disabled = true;
css2.disabled = false;
}
}
```
以上代碼中,我們找到了頁(yè)面上所有`link`標(biāo)簽,然后判斷第一個(gè)`link`的`disabled`屬性,如果是`true`,就把它切換為`false`,同時(shí)把第二個(gè)`link`的`disabled`屬性設(shè)置為`true`。如果第一個(gè)`link`的`disabled`屬性本來(lái)就是`false`,就把它設(shè)為`true`,同時(shí)把第二個(gè)`link`的`disabled`屬性設(shè)置為`false`。
最后,我們可以把`switchCSS`函數(shù)綁定到一個(gè)按鈕上:
```html```
這樣的話,當(dāng)點(diǎn)擊這個(gè)按鈕時(shí),頁(yè)面上的CSS就會(huì)被切換了。
網(wǎng)站導(dǎo)航
- zblogPHP模板zbpkf
- zblog免費(fèi)模板zblogfree
- zblog模板學(xué)習(xí)zblogxuexi
- zblogPHP仿站zbpfang