我才12岁 ?

很久之前，写过一篇文字，是如何去掉 pre 标签内的垂直滚动条，这两天在使用的时候发现其中存在很大的缺点，就是当代码很长的时候，需要将页面往下拉才能拉动水平滚动条看右边的文字，反复的拉滚动条，挺烦人的。所以，要想办法去掉所有的滚动条，并促使代码在 pre 内换行。

思想其实很简单，就是参照上篇文字的做法，对 pre 标签内的代码进行正则替换，然后定义 pre 里的这些标签的 white-space 属性为 normal 即可实现自动换行，并去掉水平和垂直的滚动条。你也许会说，如果我将 pre 的 white-space 属性为 normal 不可以吗？你可以自己试下，如果这样的话 pre 就和一个正常的标签一样了，那么所有的代码都会挤到一起啦。

下边是代码，欢迎各位指正：

继续阅读 »

首先，我们先看一下例子：

HTML 代码：

<pre>
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
        oldonload();
        func();
        }
    }
}


function tagCloud() {
    if(document.getElementById("tags_cloud")) {
        var tags = document.getElementById("tags_cloud");
        var tagLinks = tags.getElementsByTagName("a");
        var styles = new Array();
        styles[0] = new Array("#FF0000","FFCC00","FF9900","#0099FF","#999999"); //设定字体的颜色随机的种类
        styles[1] = new Array("12px","14px","16px"); //设定字体的大小随机的种类
        styles[2] = new Array("400","500","600","700"); //设定字体的粗细随机的种类
        for(var i=0; i<tagLinks.length; i++) {
            tagLinks[i].style.color = styles[0][Math.floor(styles[0].lengthMath.random())]; //设定字体的颜色
            tagLinks[i].style.fontSize = styles[1][Math.floor(styles[1].lengthMath.random())]; //设定字体的大小
            tagLinks[i].style.fontWeight = styles[2][Math.floor(styles[2].length*Math.random())]; //设定字体的粗细
        }
    }
}

addLoadEvent(tagCloud);</pre>

CSS 代码：

pre { border:1px solid #0066FF; background:#F0F0F0; overflow:auto; padding:5px; width:400px; height:400px;}

这里，pre 的宽度和高度固定，所有浏览器的宽度和高度表现是统一的，滚动条内含在宽度和高度里边，带上滚动条和边框，我们所看到的宽度和高度都是 412px。可以在这里看到这一个版本的表现。

继续阅读 »