拥抱 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 库的话,那么毫不犹豫地用第二种吧,你看代码是何其简洁啊!

最后祝大家裸奔愉快!

  • http://rpsh.net/ 任平生

    还好,我的 CSS 都在 .css 文件里写,删了 链接就好了,呵呵~~

  • http://sivan.in/blog/ Sivan

    我脱光了。

  • http://leeiio.me/ Leeiio

    @任平生 @Sivan 害羞中……

  • http://lorz.me Lorz

    围观裸奔

  • http://showfom.com/ Showfom

    你也脱衣了???不会吧

  • http://onefrozen.com onefrozen

    如果一年有365天,是这节日,我就不用在这煞费苦心了,囧

  • http://welee.org welee

    我也脱了哦,呼呼呼!!
    我用的是土方法,也就是直接将 CSS style link 给拿掉,因为我很乖,都把所有 CSS 写进 style.css 文件内,呵呵!

  • http://leeiio.me/ Leeiio

    @all 呃,裸奔其實也是要有好身材的!

  • http://philna.com yinheli

    @任平生
    我建议来个javascript的裸奔.因为我禁用javascript后发现N多的网站根本无法使用.所谓’平稳退化’对于部分站点来讲那个是狗屁.
    CSS我就不参加了.哈哈~

  • http://rpsh.net/ 任平生

    @yinheli 在ff的adblock里,过滤.css看

  • http://www.iqbee.cn 吖Bee

    好像很爽的样子

  • http://www.ediyang.com eddie

    可惜我昨天去外面看真人的裸奔节了,可惜啊

  • http://showfom.com/ Showfom

    小样,居然用Sweet Titles,嘿嘿,你这个JavaScript专家还来问我这种问题,郁闷……

  • 千葉

    越來越插不上話了 :shock: :shock: 桑心

  • http://leeiio.me/ Leeiio

    @千葉 这便是传说中的做人的差别…

  • http://www.life-studio.cn 万戈

    真有意思呀,可惜我没注意,明年应该还有吧。。。

  • http://cn.huachen.me/ 华晨

    呵呵,壮观!对了,问一下,你的博客进来的时候显示进度是怎么做的呢? :?:

  • http://leeiio.me/ Leeiio

    @华晨
    http://www.ll19.com/web_loading.html 這個地址有詳細說明。

  • Pingback: RSSA频道 » Blog Archive » 桌面便签小软件ATnotes – 提醒你勿忘临时小需求!

  • Pingback: RSSA频道 » Blog Archive » 魔兽世界同人动画片《我叫MT》

  • http://wooshoo.cn feihongly

    @Leeiio
    这话绝对赞同

  • http://www.houzi.in 猴子

    嘿嘿,脱了。
    借走这里的那张震撼人心的图片了 :shock:

    • http://leeiio.me/ Leeiio

      @猴子 不过今年什么时候裸奔官方还没公布时间呢

    • http://www.houzi.in 猴子

      @Leeiio 就今天呀。

  • Pingback: 2010 年 CSS 裸奔节 - Leeiio Chaos Made.

  • http://zww.me zwwooooo

    围观,反正跟脸红没关系

  • http://rtrash.net 废纸篓

    真的搞不懂..

  • http://暂无

    很漂亮的网站,敬仰

  • Pingback: 2011 年 CSS 裸奔节 ! - Leeiio Chaos Made.