取色工具 TakeColor
我们在开发前端写CSS样式的时候可能遇到一些取色问题，需要取某种不经常使用的颜色。这样的话我们不可能把某个区域截图截下来然后再用Photo Shop 打开去那种颜色，那样简直太麻烦了（我以前就那样干了好长时间 !- . -）。这个工具帮助我们解决此问题。软件运行后可以获取窗口上任意位置的颜色，有需要的朋友可以下载下来试试，软件不需要安装加压缩后运行即可使用。
测量距离工具
很多时候我们做前端开发时会遇到写CSS时调整DIV的位置或者距离，这个软件可以帮你测量两个点之间的像素数。或者你可以使用QQ自带的截屏功能，截屏时会显示所要截取区域的宽高像素数，像我这种懒人就使用QQ的截屏功能了。不过此软件很好用，适合专业人士使用。程序运行后在桌面上会出现两个滑块，拖动两个滑块于两个位置就会显示两个滑块之间的距离。软件不需要安装，解压后运行即可使用。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
javascript 在不同浏览器下取区域高度宽度方法
<script type=”text/javascript”>// <![CDATA[
function getInfo(){
var s = “”;
s += “网页可见区域宽：”+ document.body.clientWidth;
s += ” 网页可见区域高：”+ document.body.clientHeight;
s += ” 网页可见区域宽：”+ document.body.offsetWidth + ” (包括边线和滚动条的宽)”;
s += ” 网页可见区域高：”+ document.body.offsetHeight + ” (包括边线的宽)”;
s += ” 网页正文全文宽：”+ document.body.scrollWidth;
s += ” 网页正文全文高：”+ document.body.scrollHeight;
s += ” 网页被卷去的高(ff)：”+ document.body.scrollTop;
s += ” 网页被卷去的高(ie)：”+ document.documentElement.scrollTop;
s += ” 网页被卷去的左：”+ document.body.scrollLeft;
s += ” 网页正文部分上：”+ window.screenTop;
s += ” 网页正文部分左：”+ window.screenLeft;
s += ” 屏幕分辨率的高：”+ window.screen.height;
s += ” 屏幕分辨率的宽：”+ window.screen.width;
s += ” 屏幕可用工作区高度：”+ window.screen.availHeight;
s += ” 屏幕可用工作区宽度：”+ window.screen.availWidth;
s += ” 你的屏幕设置是 “+ window.screen.colorDepth +” 位彩色”;
s += ” 你的屏幕设置 “+ window.screen.deviceXDPI +” 像素/英寸”;
alert (s);
}
// ]]></script>
javascript控制css中style.height和style.width时应注意px单位问题
1、document.getElementById(‘div’).style.height=100; //这样写以IE里会正确执行，把ID为div元素高改为100象素。
2、但是读的时候，alert(document.getElementById(‘div’).style.height + 10); //这样将会出错，因为读取style.height的时候，会以”100px”的形式出现。
3、到了FF里，不光读出来的是”100px”，写的时候，也必须是document. getElementById(‘div’).style.height=’100px’;这样才能有效果。
在IE中一般用js：obj.onselectstart=function(){return false;}
firefox用CSS:-moz-user-select:none
IE下面用JS
<script type=”text/javascript”>
document.onselectstart = function(){
return false;
}
</script>FF下面CSS
<style type=”text/css”>
body {
-moz-user-select: none;
}
</style>
今天遇到一个问题，就是有一个 div 拥有 float 属性，它的上一层 div 高度为 100% ，此时在IE下面显示正常，上一层 div 高度没有问题，但是在FF下出错，FF下没有计算 float 的高度。就是说在IE下面 float 相当于移动，在FF下面 float 相当于浮动是不计算高度。所以，需要在它的上一层清除这个 float ，清除代码使用 overflow: auto; 详细请看演示。
演示地址：http://demo.joyfulboy.cn/js/choice/
JS调用说明：
函数调用方法：
choice(参数1, 参数2, 参数3, ……, 参数n);参数说明：
参数1 = this; 当前对象；
参数2 = “你需要显示的 DIV ID”; 字符串类型；
参数3 – 参数n = “你需要隐藏的 DIV ID”; 字符串类型；
参数顺序不允许颠倒；例如：onmouseover = ‘choice(this, “show1”, “show2”);’;
此时当鼠标移动到此上面时ID为show1的DIV显示，ID为show2的DIV隐藏；例如：onmouseout = ‘choice(this);’;
此时当鼠标移开此上面时className=choice
在线演示地址1：http://demo.joyfulboy.cn/js/tagswitch/1/
在线演示地址2：http://demo.joyfulboy.cn/js/tagswitch/2/
看演示，两种方法，显示效果都一样。
演示1所用的方法是把不需要显示的内容所在的DIV块用CSS样式隐藏了，好处是任何被隐藏的内容也会被搜索引擎识别并抓取，坏处是样式如果不加载的话被隐藏的内容就会显示出来。
演示2所用的方法是利用JS把所显示的内容动态写进DIV块内，DIV块永远是那一个DIV，内容是动态变的，好处是不受CSS样式的影响，坏处就是搜索引擎不会抓取动态改变的内容。
JS调用方法自己参考演示页面源码或查看JS文件注释，这里不想多说了，个人推荐应用第二中方法。
在线演示地址：http://demo.joyfulboy.cn/js/loader/
JS调用方法：
<script type=”text/javascript” src=”http://www.joyfulboy.cn/demo/js/loader/js/loader.js”></script>
<script type=”text/javascript”>
<!–
开启载入效果(“载入中…”);
//–>
</script>
在线演示地址：http://demo.joyfulboy.cn/js/openlink/2/
此JS应用可以使点击鼠标即可点击某个链接，目前只兼容IE浏览器。
函数调用方法：
GetImageLink(12, “imagelinks”, “counter”, 0, document.getElementById(“image1”), document.getElementById(“image2”), document.getElementById(“image3”));
参数说明：第一个参数“12”是设置 cookie 过期时间，从当前起12小时后过期，第二个参数“imagelinks”是设置 cookie 存储链接过期时间时使用的名字，第三个参数“counter”是设置 cookie 存储的计数器名字，第四个参数“0”是否同步打开所有链接，0为不同步，1为同步。第五至第N个参数为图片链接节点的上一个父节点对象。具体查看演示HTML页面。
详细的参数说明：第2和第3个参数必须是字符串类型，如果有多个页面调用此方法必须每个页面这两个参数不同，否则会出错。第4个参数为同步打开，即点击一下鼠标打开所设置的所有链接。第5至第N个参数可以为对象也可以为元素节点上的ID名字，也就是字符串。还可以为数组，但是数组内元素必须全部为DOM对象，否则会报错。
演示页面：http://demo.joyfulboy.cn/css/vc.html
代码请看演示地址.
IE8 FF 已经支持CSS的 vertical-align:middle; 垂直对齐属性 和 display:table-call; 元素显示为表格单元格，使用这两个属性就可以使在 IE8 FF 浏览器下页面垂直居中。IE6 IE7 不兼容这两个属性，所以使用了相对定位和绝对定位来解决此问题。（本人不是很喜欢浮动和绝对定位，但是不使用表格来实现垂直居中暂时也只好这样做，JS不算啊，用JS来实现感觉多此一举了，就像拿坦克打鸟。）
