很早就有人 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 庫的話，那麼毫不猶豫地用第二種吧，你看代碼是何其簡潔啊！
最後祝大家裸奔愉快！
還好，我的 CSS 都在 .css 文件里寫，刪了 鏈接就好了，呵呵~~
我脫光了。
@任平生 @Sivan 害羞中……
圍觀裸奔
你也脫衣了？？？不會吧
如果一年有365天，是這節日，我就不用在這煞費苦心了，囧
我也脫了哦，呼呼呼！！
我用的是土方法，也就是直接將 CSS style link 給拿掉，因為我很乖，都把所有 CSS 寫進 style.css 文件內，呵呵！
@all 呃，裸奔其實也是要有好身材的！
@任平生
我建議來個javascript的裸奔.因為我禁用javascript後發現N多的網站根本無法使用.所謂’平穩退化’對於部分站點來講那個是狗屁.
CSS我就不參加了.哈哈~
@yinheli 在ff的adblock里，過濾.css看
好像很爽的樣子
可惜我昨天去外面看真人的裸奔節了,可惜啊
小樣，居然用Sweet Titles，嘿嘿，你這個JavaScript專家還來問我這種問題，鬱悶……
越來越插不上話了 😯 😯 桑心
@千葉 這便是傳說中的做人的差別…
真有意思呀，可惜我沒注意，明年應該還有吧。。。
呵呵，壯觀！對了，問一下，你的博客進來的時候顯示進度是怎麼做的呢？ ❓
@華晨
http://www.ll19.com/web_loading.html 這個地址有詳細說明。
Pingback: RSSA頻道 » Blog Archive » 桌面便簽小軟體ATnotes – 提醒你勿忘臨時小需求！
Pingback: RSSA頻道 » Blog Archive » 魔獸世界同人動畫片《我叫MT》
@Leeiio
這話絕對贊同
嘿嘿，脫了。
借走這裡的那張震撼人心的圖片了 😯
@猴子 不過今年什麼時候裸奔官方還沒公布時間呢
@Leeiio 就今天呀。
Pingback: 2010 年 CSS 裸奔節 - Leeiio Chaos Made.
圍觀，反正跟臉紅沒關係
真的搞不懂..
很漂亮的網站，敬仰
Pingback: 2011 年 CSS 裸奔節 ！ - Leeiio Chaos Made.
請問移除 div id=wumi 中的任意對象的style=””應該怎麼寫？用jquery版。謝謝。
Pingback: 2010 年 CSS 裸奔節 ！ - IT牛人博客聚合