很早就有人 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牛人博客聚合