擁抱 CSS 裸奔節,用 JavaScript 強制脫衣

CSS 裸奔節
很早就有人 Twitter 說今天是 CSS 裸奔節,於是…

CSS Naked Day 的來歷

CSS Naked Day,也稱 CSS 裸奔節或 CSS 裸奔日。

在裸奔節這天,參加裸奔節的Blog 將會去除頁面上所有的 CSS 樣式和廣告裸奔整整一天,通過這個節日來重視 CSS 的重要性.當然你的網站如果是用 table 來布局的話這個節日對你來說並不是很合適.在2006年有將近800個國際知名網站參與這個節日.而今年CSS Naked Day將由之前的24小時改為48小時!

CSS Naked Day 的目的

推動Web標準、提倡簡潔為美、使用正確的 (x)html 語義標記、良好的層次結構。暫時把頁面設計拋棄,直接展示<body>內容!

歷屆CSS Naked Day的舉辦時間

第一屆 CSS 裸奔節:2006年4月5日

第二屆 CSS 裸奔節:2007年4月5日

第三屆 CSS 裸奔節:2008年4月9日

第四屆 CSS 裸奔節:2009年4月9日

Via

你可以前往官方網站查看更多的介紹以及了解如何加入這個活動。

然後,回到本文的重點。因為我的博客很多時候都是處在調試中的,並且很多插件諸如 Simple Tags 是直接在標籤里給元素加上 CSS 的,所以如果想要「裸奔」光是去除 .css 文件是遠遠不夠的,那麼有沒有一種強制的方法呢?我昨晚就在想這樣一種方法。於是被我想到了。也就是本文介紹如何 「強制脫衣」 ,也就是教你如何強制去除網站的 CSS

實現原理:眾所周知,CSS 調用有三種方法,一種是 link 方式,一種是 <style></style> 包裹方式,最後一種就是直接且暴力的 style=”” 方式,通過 Javascript 代碼,強制禁用 type=”text/css” 的 link 或者 讓 link 鏈接 css 的 href=”” 為空,且讓 <style></style>
被清除或者禁用,且讓 style=”” 為空 或者去除。

這裡提供兩種方法,一種是最普通的 Javascript 來實現,另外一種是通過目前的最流行的 Javascript 庫 jQuery 來實現。

第一種(普通版):

<script type="text/JavaScript">	
// 用style方式引用的css
var style=document.getElementsByTagName('style');
var s='Style:' + style.length;
for (i=0; i<style.length; i++)
{
    /*s += style.item(i) + '|';*/
    style.item(i).disabled=true;
}
 
// 用link方式引用的css
var link = document.getElementsByTagName('link');
s += 'Link:' + link.length;
for (i=0; i<link.length; i++)
    if ('text/css' == link.item(i).type)
        {
            /*s += link.item(i).href + "|\\n";*/
            link.item(i).disabled=true;
        }
 
// 任意對象的style=""
var obj = document.getElementsByTagName('body').item(0).childNodes;
var obj = document.getElementsByTagName('*');
s += 'Obj:' + obj.length;
for (i=0; i<obj.length; i++)
{   
    obj1 = obj.item(i);
    if (obj1.attributes.getNamedItem('style'))
    {
        s += obj1.nodeName + obj1.attributes.getNamedItem('style').value + "\\n";
        obj1.attributes.getNamedItem('style').value = "";
    }
}
</script>

只需將以上這段 JS 代碼插入你的網頁中即可。

接著是第二種(jQuery版)

<script type="text/JavaScript">		
$(document).ready(function(){
	// 用link方式引用的css
	$("link").attr("type", function() { 
		if ($(this).attr("type") == "text/css")
			$(this).attr("href","");
	}); 
 
	// 任意對象的style=""
		$("*").removeAttr("style");
 
	// 用style方式引用的css
	$("style").remove();
});
</script>

如果你的網站啟用了 jQuery 庫的話,那麼毫不猶豫地用第二種吧,你看代碼是何其簡潔啊!

最後祝大家裸奔愉快!