CSS裸奔节之强制脱衣 : 偶爱偶家

CSS裸奔节之强制脱衣

枫叶

CSS裸奔节已经成为了众多对w3c标准支持的爱好者的一个传统节日了，就在2007年的4月5日，很多的互联网的站长和博主都加入了这个CSS裸奔节，其中就有《 CSS Naked Day 》、天佑的自由天地的《 CSS Naked Day 》、 Yskin’s Blog 的《 4月5日，CSS裸体日》，不过对于wordpress用户来说，这个裸奔也不简单，根绝Yskin’s Blog 的《 4月5日，CSS裸体日》中所说的，很麻烦。原话如下

“我刚把Blog的CSS撤掉了。WordPress会通过检测模板目录下是否存在style.css来验证模板的正确性，所以直接将K2的style.css文件改名将会使Blog自动恢复默认模板。所以，我通过修改.htaccess文件，屏蔽掉对所有CSS文件的访问。嗯，裸奔的感觉还不错。”

所以在4月5日那天我的博客也没有裸奔，只是在心里让博客裸了一下，呵呵。不过今天在 Fwolf’s Blog 发现了这篇《 CSS裸奔节之强制脱衣 (trackback) 》文章，觉得如果能早点发现，那天我就可以让我的浏览器来裸奔一下，体验一下整个世界裸奔的感觉，那是一种相当的震撼啊！感觉这个方法特好，特此转载如下：

授权方式：署名，非商业用途，保持一致，转载时请务必以超链接(http://www.fwolf.com/blog/post/312)的形式标明文章原始出处和作者信息及本声明。

今天是CSS裸奔节，所谓CSS裸奔，就是把网站的所有css去掉，这样所有的显示格式什么的就都没有了，只剩下html实体显示出来，起源好像是比较无聊的想法，就是剥去css的外衣，让大家看看你的(x)html代码是否工整。

不过今天偶不打算裸奔，而是告诉大家一个可以看到任何网站裸奔形象的方法，参考我以前写的用js丰富你的书签功能，创建一个书签，也可以放到书签工具栏上，内容如下：

javascript:void((function(){var style=document.getElementsByTagName('style');for (i=0; i<style.length; i++)style.item(i).disabled=true;var link = document.getElementsByTagName('link');for (i=0; i<link.length; i++)if ('text/css' == link.item(i).type)link.item(i).disabled=true;var obj = document.getElementsByTagName('*');for (i=0; i<obj.length; i++){obj1 = obj.item(i);if (obj1.attributes.getNamedItem('style')){obj1.attributes.getNamedItem('style').value = '';}}})());

注意一定要是一行才行，作为书签地址就可以了，然后打开任何一个网站，点这个书签，是不是把css全部都脱掉了？懒人也可以直接把这个链接拖到工具栏上使用：

CSS裸奔

公布源代码如下，没有太复杂的地方，有了DOM说明，知道各个对象的方法和属性之后，把style和link全部禁用，然后把inline的style=""的value全部设置为空串就可以了：

javascript:void((function(){
/* 用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 = “”;
    }
}
/*alert(s);*/
})());

这个文件删除掉注释以后，可以用下面这个命令转换为一行：

cat css1.js |tr -d \\n |sed -r -e ’s/$/\n/’ -e ’s/\t//g’

这样就得到了上面那段源代码。

javascript程序调试比较麻烦，以前我的方法是在vim中编辑，然后用命令转化为一行，再手工粘贴到书签的地址中，执行，然后有错误再回到编辑。不过今天发现一个好方法，其实也就是脑子转个弯儿的事，创建一个html文件，在里面把javascript代码调试好，然后再转换为可以用在书签中的形式。

另外Firefox2的Error Console虽然能够监测js错误，但是如果不小心点了上面的“Messages”，就会发现错误不显示了，需要再点“All”查看所有信息，今天为这是纳闷了半天，因为切换显示错误分类的时候没有任何征兆。