春去花还在-CoLee★＂ » JavaScript http://colee.99n9.com CoLee的网页设计制作素材、html、javacript、ajax代码精心自编或修改收藏，欢迎大家共享与交流。 Tue, 04 Aug 2009 03:51:52 +0000 http://wordpress.org/?v=2.8 en hourly 1 做web前端开发常用工具介绍 http://colee.99n9.com/%e5%81%9aweb%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e5%b8%b8%e7%94%a8%e5%b7%a5%e5%85%b7%e4%bb%8b%e7%bb%8d/ http://colee.99n9.com/%e5%81%9aweb%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e5%b8%b8%e7%94%a8%e5%b7%a5%e5%85%b7%e4%bb%8b%e7%bb%8d/#comments Tue, 04 Aug 2009 03:51:52 +0000 CoLee★＂ http://colee.99n9.com/?p=221 由于近年来RIA相关技术的兴起，WEB前端相关职位已经开始出现在越来越多的互联网公司中，而且越来越受到人们的重视。

现在做前端与前些年（PS设计出效果图，dreamweaver拉出界面，就可以交由后台程序员来套程序了）已经完全不同。由于浏览器运行环境以及RIA项目需求的特殊性，WEB前端所涉及的东西也越来越多，web标准、多浏览器兼容、程序性能、JS内存泄露、js/Ajax的调试…很多很多的问题摆到了WEB前端开发人员身上，因此如果能有一些相关的小工具来辅助我们，相信对于我们的项目开发效率和开发难度上都会有所改善。

尽管本人在前端开发方面还有太多太多的未知，但是在实际开发中也积累了不少各类各样的前端开发用的小工具，有些工具对于我们的项目来说甚至是事半功倍的。

废话不多说，我就分类来分享一下本人所用到一些工具，一来自己做个总结，二来希望能对其它做开发的朋友有所帮助。

这篇文章主要介绍关于开发方面的相关的工具。

1、Aptana

说到Aptana，我想每一位做前端技术的朋友都应该已经知道它的大名了。Aptana是一个基于Eclipse的致力于前端开发（JavaScript）的工具，其功能非常强大，而且是开源项目（Profession版收费）。

它具有以下特点：

1、JavaScript,HTML,CSS代码提示
2、代码结构（大纲）：显示JavaScript,HTML和CSS的代码结构。 
3、代码语法错误提示。 
4、支持Aptana UI自定义和扩展。 
5、支持跨平台。 
6、支持流行AJAX框架的Code Assist功能：AFLAX，Dojo，JQuery，MochiKit，Prototype，Rico，script.aculo.us，Yahoo UI。 
7、JS代码在IE/FF下的断点调试。
8、插件丰富，如AIR、PHP、Ruby、Python等语言的开发插件。
9、内置其自行开发的Ajax应用服务器Aptana Jaxer。

对于纯前端的开发来讲，特别是js的开发来讲，aptana真的是不可多的的好工具。

2、Spket

Spket也是一个基于Eclipse构建起来的开源JS开发工具。可单独使用，也可作为eclipse插件使用。具有强大的JS、Ajax框架代码提示功能。特别是开发Jquery/ExtJS时，使用这个插件可以为开发带来极大的方便，免去记忆和查找大量复杂API之苦。特别推荐使用EXT的开发人员使用，这个工具应该是当前开发extjs的首推工具了，网上甚至有人称其为“Ext开发人员的紫色匕首”。

3、TopStyle

这个工具真是太有名了，我想每位做前端的人可能都要比我还要熟悉它，它是一款功能专注于CSS设计的辅助工具，功能十分丰富，包括：可以选取特定的浏览器或CSS阶层、内建的样式表检查器、内部的预览能力、以颜色标示的编辑器，以及样式预览等，具体可以到这里看介绍：[URL=]http://baike.baidu.com/view/662735.htm[/URL]。

4、JSA 优秀的JS代码压缩混淆工具

这个本来应该不算开发工具，但是不知归到哪里比较好，而且觉得这个对于最终代码发布来说还是一个很有用的工具，因此这里就推荐一下。JSA是用基于JAVA开发的js脚本压缩工具，文件后缀是jar格式的，因此需要你的电脑首先安装了JRE运行环境。该压缩工具采用的压缩算法，可以使你的JS代码达到最小，从而加速页面的加载速度。

5、PlayColor/飞鱼网页尺/SWFDecompiler

这里推荐的三款工具主要使用于界面和美工设计。

PlayColor是一块小巧的取色工具，在网页设计中，特别是参考一些设计资源的配色时，这个工具能为我们带来很大的方便。

飞鱼网页尺是一个用来测量屏幕中两点之间距离的小工具，这个在前端页面的设计制作中也用的比较多，当然可取代的工具也不少，有兴趣的大家可以网上找找。

SWFDecompiler：大名顶顶的Flash反编译工具，有时候我们再网上看到很多有用的Flash，但是由于没有源码，即没办法应用到我们的项目中，又不能学习研究其源码，有了这个工具，你的想法基本就可以实现了。

这几个工具这里就不给出下载地址了，baidu/google一下，N多可以下载的。

]]> http://colee.99n9.com/%e5%81%9aweb%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e5%b8%b8%e7%94%a8%e5%b7%a5%e5%85%b7%e4%bb%8b%e7%bb%8d/feed/ 0 一个可以左右拖拽的翻页效果 http://colee.99n9.com/%e4%b8%80%e4%b8%aa%e5%8f%af%e4%bb%a5%e5%b7%a6%e5%8f%b3%e6%8b%96%e6%8b%bd%e7%9a%84%e7%bf%bb%e9%a1%b5%e6%95%88%e6%9e%9c/ http://colee.99n9.com/%e4%b8%80%e4%b8%aa%e5%8f%af%e4%bb%a5%e5%b7%a6%e5%8f%b3%e6%8b%96%e6%8b%bd%e7%9a%84%e7%bf%bb%e9%a1%b5%e6%95%88%e6%9e%9c/#comments Wed, 29 Jul 2009 13:34:09 +0000 CoLee★＂ http://colee.99n9.com/?p=217 一个可以左右拖拽的翻页效果

]]> http://colee.99n9.com/%e4%b8%80%e4%b8%aa%e5%8f%af%e4%bb%a5%e5%b7%a6%e5%8f%b3%e6%8b%96%e6%8b%bd%e7%9a%84%e7%bf%bb%e9%a1%b5%e6%95%88%e6%9e%9c/feed/ 0 详解javascript获取url网址信息 http://colee.99n9.com/%e8%af%a6%e8%a7%a3javascript%e8%8e%b7%e5%8f%96url%e7%bd%91%e5%9d%80%e4%bf%a1%e6%81%af/ http://colee.99n9.com/%e8%af%a6%e8%a7%a3javascript%e8%8e%b7%e5%8f%96url%e7%bd%91%e5%9d%80%e4%bf%a1%e6%81%af/#comments Thu, 23 Jul 2009 07:50:32 +0000 CoLee★＂ http://colee.99n9.com/?p=208 用javascript获取url网址信息

执行 用javascript获取url网址信息 代码效果如下

location.host=www.99n9.com
location.hostname=www.99n9.com
location.href=http://www.99n9.com/bc/2008/0306/article_1860.html
location.pathname=/bc/2008/0306/article_1860.html
location.protocol=http:

 

 

详细介绍 window.location方法获取URL

 

统一资源定位符 (Uniform Resource Locator, URL) 完整的URL由这几个部分构成：

scheme://host:port/path?query#fragment

 

scheme:通信协议

常用的http,ftp,maito等

 

host:主机

服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。

 

port:端口号

整数，可选，省略时使用方案的默认端口，如http的默认端口为80。

 

path:路径

由零或多个”/”符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。

 

query:查询

可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页）传递参数，可有多个参数，用”&”符号隔开，每个参数的名和值用”=”符号隔开。

 

fragment:信息片断

字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释。(也称为锚点.)

 

示例： 

1, window.location.href

整个URl字符串(在浏览器中就是完整的地址栏)

返回值：http://www.2astudio.com:80/view.asp?id=209#cmt1323

 

2,window.location.protocol

URL 的协议部分

返回值：http:

 

3,window.location.host

URL 的主机部分，

返回值：www.2astudio.com

 

4,window.location.port

URL 的端口部分。如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符。

本例返回值:空

 

5,window.location.pathname

URL 的路径部分(就是文件地址)

返回值：/view.asp

 

6,window.location.search

查询(参数)部分。除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值

返回值：?id=209

 

7,window.location.hash

锚点

返回值：#cmt1323

]]> http://colee.99n9.com/%e8%af%a6%e8%a7%a3javascript%e8%8e%b7%e5%8f%96url%e7%bd%91%e5%9d%80%e4%bf%a1%e6%81%af/feed/ 0 始终在页面固定位置的层_网页特效演示页 http://colee.99n9.com/%e5%a7%8b%e7%bb%88%e5%9c%a8%e9%a1%b5%e9%9d%a2%e5%9b%ba%e5%ae%9a%e4%bd%8d%e7%bd%ae%e7%9a%84%e5%b1%82_%e7%bd%91%e9%a1%b5%e7%89%b9%e6%95%88%e6%bc%94%e7%a4%ba%e9%a1%b5/ http://colee.99n9.com/%e5%a7%8b%e7%bb%88%e5%9c%a8%e9%a1%b5%e9%9d%a2%e5%9b%ba%e5%ae%9a%e4%bd%8d%e7%bd%ae%e7%9a%84%e5%b1%82_%e7%bd%91%e9%a1%b5%e7%89%b9%e6%95%88%e6%bc%94%e7%a4%ba%e9%a1%b5/#comments Thu, 23 Jul 2009 03:39:17 +0000 CoLee★＂ http://colee.99n9.com/?p=205 始终在页面固定位置的层_网页特效演示页

]]> http://colee.99n9.com/%e5%a7%8b%e7%bb%88%e5%9c%a8%e9%a1%b5%e9%9d%a2%e5%9b%ba%e5%ae%9a%e4%bd%8d%e7%bd%ae%e7%9a%84%e5%b1%82_%e7%bd%91%e9%a1%b5%e7%89%b9%e6%95%88%e6%bc%94%e7%a4%ba%e9%a1%b5/feed/ 0 javascript行为事件简介 http://colee.99n9.com/javascript%e8%a1%8c%e4%b8%ba%e4%ba%8b%e4%bb%b6%e7%ae%80%e4%bb%8b/ http://colee.99n9.com/javascript%e8%a1%8c%e4%b8%ba%e4%ba%8b%e4%bb%b6%e7%ae%80%e4%bb%8b/#comments Thu, 23 Jul 2009 03:37:34 +0000 CoLee★＂ http://colee.99n9.com/?p=203 行为事件简介

行为(Behaviors): 为响应某一事件(Event)而采取的一个动作（Action)的过程 。行为由事件和动作两部分组成。

动作（Action）:是一段程序，用于完成某一组特定的操作，如打开一个窗口，播放一段音乐等，Dreamweaver中有20多种行为。

事件（Event):是由用户或浏览器触发的操作，一个事件总是针对网页元素或标签而言，如onMouseOver、onClick、onMouseOut等。
注意：只有在4.0以上版本的浏览器才支持Dreamweaver中的大多数行为，所以我们在使用行为之前要先设置一下浏览器，在Window—–Behavior—-Show Events For—-IE 5.0

 

常用事件：

onAbort—-当用户终止正在打开的网页（下载传输）时发生
onAfterUpdate—-当网页中数据被更新时发生
onFocus—-网页上的元素获得焦点时发生

onBlur—-某元素失去活动焦点时发生（如取消选中的文字）
onChange—-网页上元素的属性发生改变时发生（失去焦点时捕获）
onpropertychange 同上,（能即时捕获）
onClick—-单击网页上的某元素时
onDblclick—-双击网页上的某元素时
onError—-浏览器在打开网页过程中（下载期间）有错误时发生
onHelp—-用户点击浏览器帮助时发生
onKeyDown—-按下任意键时（未释放）
onKeyPress—-按下任意键时（已释放）
onKeyUP—-当按键被释放时发生
onLoad—-网页或图像调入完成后发生
onMouseDown—-在网页的某元素上按下鼠标时发生
onMouseUP—-释放按下的鼠标时发生

onMouseMove—-在网页的某元素上移动鼠标时发生
onMouseOut—-从网页的某元素上移出鼠标时发生
onMouseOver—-从网页的某元素上移入鼠标时发生
onPropertyChange—-当指定元素状态改变时发生
onReset—-重置表单初始值时发生
onResize—-改变浏览器窗口大小时发生
onSelect—-选中文字时发生
onScroll—-滚屏时发生
onStart—-滚动文本开始滚动时发生
onSubmit—-提交表单时发生
onUnload—-从当前网页退出时发生

功能简介
若要给页面添加行为，那么必须先选择对象，可以是链接、图像、图层等元素，也可以整个页面。如果要给整个页面添加行为，则单击文档窗口状态栏中的<body> 。
Shift+F3可快速调出行为控制面板：添加/删除行为按钮、事件栏、动作栏、行为列表窗及行为排序按钮。
1、 调用JavaScript行为：(Call JaveScript)
功能：执行用户自定义的JavaScript脚本。
2、 改变属性行为：（Change Property）
功能：改变元素或对象的属性

Type of Object:选择要改变属性的对象类型
Named Object:选择要改变属性的对象名

Property:Select—选择要改变属性的浏览器
Enter—-如对属性非常熟悉可以直接输入
New Value:输入新的属性值

3、 检查浏览器行为：(Check Browser)
功能：检查浏览器的类型和版本，并据此打
开指定的网页。
Stay on this page:保持在当前网页
Go to URL：打开“URL”中指定的网页
Go to Alt URL: 打开“Alt URL”指定的网页
4、 检查插件行为：(Check Plugin)
功能：根据浏览器安装插件的情况打开指定的网页。
Plugin:Select—选择要检查的插件类型
Enter—-直接输入要检查的插件类型
If Found Go to URL:若浏览器安装有上面指定的插件则打开此处网页，默认为当前页
Otherwise,Go to URL:若浏览器未安装上面指定的插件，则打开此处网页。
Always go to first URL if detection is not possible:当无法检查浏览器插件时，打开”If Found Go To URL”中指定的网页。
5、 控制Shockwave或Flash电影行为：(Control Shockwave or Flash)
功能：控制Shockwave或Flash媒体，如播放、停止等。
Movie:选择要控制的媒体
Action:选择控制所选媒体的方式
Play:播放
Stop:停止
Rewind:返回第一帧
Go To Frame:移到指定帧

6、 拖动层行为：(Drag Layer)
功能：拖动层。如创建一些类似拼图之类的游戏。
<Basic>标签下：
Layer:选择要拖动的层（提前为各层加上不同的标签）
Movement:确定所选层的拖动范围
Unconstrained:在页面上任意拖动
Constrained:在指定范围内拖动（会出现上、下、左、右拖动的距离）
Drop Target:填写所选层拖动的目标位置。单击“Get Current Position”将会自动填入所选层的当前位置。
Snap if Within:在拖动所选层时，当该层离指定的目标位置在多大的范围内时，该层自动移到指定的目标位置（吸入）例如：拼图

7、 转到链接行为：(Go To URL)
功能：在指定的窗口或框架打开指定的网页
Open In:选择网页打开的窗口或页框
URL:指定要打开的网页

8、 跳转菜单行为：(Jump Menu)
功能：编辑和控制跳转菜单
Insert—Form objects—Jump Menu插入一个多项下拉菜单，可以选择带不带GO按钮
9、 执行跳转菜单行为：(Jump Menu Go)
功能：打开跳转菜单中选择的链接
GO按钮的功能：触发不能跳转的项
10、 打开浏览器窗口行为：（Open Browser Window）
功能：在新的浏览器窗口中打开指定的网页
URL to Display:要打开的网页地址
Window Width:新打开窗口的宽度
Window Heigh:新打开窗口的高度
Attributes:属性
Navigation Toolbar:导航工具栏
Menu Bar:菜单栏
Location Toolbar:地址栏
ScrollBars AS Needer:滚动条
Status Bar:状态栏
Resize Handles:是否可以改变窗口大小
Window Name:新窗口的名称
11、 播放音乐行为：(Play Sound)
功能：可以播放MID音乐，并对音乐进行控制。
当添加此行为时，在页面中插入一个插件占位符，选中此占位符，将属性控制面板中的“Parameters”（参数）项中的“LOOP”的值改为“true”时，音乐可以循环播放。
12、 弹出消息行为：(Popup Message)
功能：根据鼠标操作显示指定的信息窗口

13、 预载图像行为：(Preload Images)
功能：预先载入图像，可以使网页中的图像得到一定的缓冲， 在用户与服务器失去联系时还可以继续传送。

14导航条图像行为：(Set Nav Bar Image)
功能：根据用户的鼠标操作显示导航条图像的变化及网页的打开
先插入一个导航条，每一个单元有四种状态：初始、移入、点击、点击后再移入。
然后在页面中选择导航条的第一个单元，单击此行为，出现对话框：
<Basic>标签
<Advanced>标签
Over Image or Over While Down Image:
当鼠标移入选中（第一单元）的单元时改变“Also Set Image”中的其它单元的图像
Also Set Image:选择要改变图像的单元
To Image File:改变后的图像
If Down,To Image File:再次改变后的图像
15、 文本行为：(Set Text)
Set Text of Frame:设置框架中的文本
Set Text of Layer:设置层中的文本
Set Text of Status Bar:设置浏览器状态栏
Set Text of Text Field:设置表单中文本域
16显示/隐藏层行为：(Show-HideLayers)
17、 交换图像行为：(Swap Image)
18、 交换—恢复图像行为：(Swap Image Restore)
类似于我们前面讲过的图像翻转，就是利用了这两个行为。
Images:要变化的图像列表
Set Source to:输入要交换的图像文件
Preload Images:是否预载图像
Restore Images onMouseOut:鼠标移出时，是否恢复原来的图像。
添加了onMouseOver—Swap Image和
onMouseOut—Swap Image Restore行为。

19、 时间线行为：(Time Line)
play timeline:播放时间线上的动作
stop timeline:停止时间线上的动作
Go to timeline frame:循环控制，跳转到指定帧
20、 激活表单行为：(Validate Form)
功能：校验表单数据的合法性

]]> http://colee.99n9.com/javascript%e8%a1%8c%e4%b8%ba%e4%ba%8b%e4%bb%b6%e7%ae%80%e4%bb%8b/feed/ 0 10步掌握CSS定位 http://colee.99n9.com/10%e6%ad%a5%e6%8e%8c%e6%8f%a1css%e5%ae%9a%e4%bd%8d/ http://colee.99n9.com/10%e6%ad%a5%e6%8e%8c%e6%8f%a1css%e5%ae%9a%e4%bd%8d/#comments Fri, 10 Jul 2009 10:23:11 +0000 CoLee★＂ http://colee.99n9.com/?p=186 http://colee.99n9.com/10%e6%ad%a5%e6%8e%8c%e6%8f%a1css%e5%ae%9a%e4%bd%8d/feed/ 0 转unicode编码与反编 http://colee.99n9.com/%e8%bd%acunicode%e7%bc%96%e7%a0%81%e4%b8%8e%e5%8f%8d%e7%bc%96/ http://colee.99n9.com/%e8%bd%acunicode%e7%bc%96%e7%a0%81%e4%b8%8e%e5%8f%8d%e7%bc%96/#comments Thu, 09 Jul 2009 09:48:02 +0000 CoLee★＂ http://colee.99n9.com/?p=179 http://colee.99n9.com/%e8%bd%acunicode%e7%bc%96%e7%a0%81%e4%b8%8e%e5%8f%8d%e7%bc%96/feed/ 0 offset与scroll等坐标函数介绍 http://colee.99n9.com/offset%e4%b8%8escroll%e7%ad%89%e5%9d%90%e6%a0%87%e5%87%bd%e6%95%b0%e4%bb%8b%e7%bb%8d/ http://colee.99n9.com/offset%e4%b8%8escroll%e7%ad%89%e5%9d%90%e6%a0%87%e5%87%bd%e6%95%b0%e4%bb%8b%e7%bb%8d/#comments Thu, 09 Jul 2009 08:02:55 +0000 CoLee★＂ http://colee.99n9.com/?p=174 获取大小的属性有 CSS ( 大小 +border) 属性对应的 offset 长宽属性（无标准的实事标准）：
1. offsetWidth
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。
与 CSS width + border 对应
2. offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。  
与 CSS height + border 对应
CSS ( 大小 -padding ) 属性对应的 client 长宽属性（无标准的实事标准）：  
3. clientWidth
获取对象的宽度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。
与 CSS width - 滚动条宽度 ( 如果有 )
对应
4. clientHeight
获取对象的高度，不计算任何边距 (margin) 、边框、滚动条或可能应用到该对象的补白 (padding) 。
与 CSS height - 滚动条宽度 ( 如果有 )
对应

获取位置信息的属性有：
几个 offset 属性（无标准的实事标准）：
offset 坐标 0 点是 offsetParent 元素 content 区域的左上点
5. offsetParent
获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。
CSS persition = absolute 时， left,top 属性值参照的元素。
Object is positioned relative to parent element’s position—or to the body object if its parent element is not positioned—using the top and left properties.
6. offsetLeft
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
与 CSS left( absolute )+margin 对应
7. offsetTop
获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。
与 CSS top(absolute)+margin 对应



scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
以上主要指IE之中，FireFox差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width – border
clientHeight = height – border
offsetWidth = width
offsetHeight = height

]]> http://colee.99n9.com/offset%e4%b8%8escroll%e7%ad%89%e5%9d%90%e6%a0%87%e5%87%bd%e6%95%b0%e4%bb%8b%e7%bb%8d/feed/ 0 鼠标及对象坐标控制属性 http://colee.99n9.com/%e9%bc%a0%e6%a0%87%e5%8f%8a%e5%af%b9%e8%b1%a1%e5%9d%90%e6%a0%87%e6%8e%a7%e5%88%b6%e5%b1%9e%e6%80%a7/ http://colee.99n9.com/%e9%bc%a0%e6%a0%87%e5%8f%8a%e5%af%b9%e8%b1%a1%e5%9d%90%e6%a0%87%e6%8e%a7%e5%88%b6%e5%b1%9e%e6%80%a7/#comments Thu, 09 Jul 2009 07:58:51 +0000 CoLee★＂ http://colee.99n9.com/?p=171 offsetTop
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。

offsetLeft
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。

offsetHeight
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

offsetWidth
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。

offsetParent
获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。

clientHeight
获取对象的高度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

clientLeft
获取 offsetLeft 属性和客户区域的实际左边之间的距离。

clientTop
获取 offsetTop 属性和客户区域的实际顶端之间的距离。

clientWidth
获取对象的宽度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。

SCROLL属性
scroll
设置或获取滚动是否关闭。

scrollHeight
获取对象的滚动高度。

scrollLeft
设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。

scrollTop
设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。

scrollWidth
获取对象的滚动宽度。

event属性
x
设置或获取鼠标指针位置相对于父文档的 x 像素坐标。

screenX
设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标

offsetX
设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。

clientX
设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条

]]> http://colee.99n9.com/%e9%bc%a0%e6%a0%87%e5%8f%8a%e5%af%b9%e8%b1%a1%e5%9d%90%e6%a0%87%e6%8e%a7%e5%88%b6%e5%b1%9e%e6%80%a7/feed/ 0 IE与FireFox的兼容性区别 http://colee.99n9.com/ie%e4%b8%8efirefox%e7%9a%84%e5%85%bc%e5%ae%b9%e6%80%a7%e5%8c%ba%e5%88%ab/ http://colee.99n9.com/ie%e4%b8%8efirefox%e7%9a%84%e5%85%bc%e5%ae%b9%e6%80%a7%e5%8c%ba%e5%88%ab/#comments Thu, 09 Jul 2009 07:57:22 +0000 CoLee★＂ http://colee.99n9.com/?p=169
  • window.event
    • IE：有window.event对象
    • FF：没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event)
  • 鼠标当前坐标
    • IE：event.x和event.y。
    • FF：event.pageX和event.pageY。
    • 通用：两者都有event.clientX和event.clientY属性。
  • 鼠标当前坐标(加上滚动条滚过的距离)
    • IE：event.offsetX和event.offsetY。
    • FF：event.layerX和event.layerY。
  • 标签的x和y的坐标位置：style.posLeft 和 style.posTop
    • IE：有。
    • FF：没有。
    • 通用：object.offsetLeft 和 object.offsetTop。
  • 窗体的高度和宽度
    • IE：document.body.offsetWidth和document.body.offsetHeight。注意：此时页面一定要有body标签。
    • FF：window.innerWidth和window.innerHegiht，以及document.documentElement.clientWidth和document.documentElement.clientHeight。
    • 通用：document.body.clientWidth和document.body.clientHeight。
  • 添加事件
    • IE：element.attachEvent(”onclick”, func);。
    • FF：element.addEventListener(”click”, func, true)。
    • 通 用：element.onclick=func。虽然都可以使用onclick事件，但是onclick和上面两种方法的效果是不一样的，onclick 只有执行一个过程，而attachEvent和addEventListener执行的是一个过程列表，也就是多个过程。例如： element.attachEvent(”onclick”, func1);element.attachEvent(”onclick”, func2)这样func1和func2都会被执行。
  • 标签的自定义属性
    • IE：如果给标签div1定义了一个属性value，可以div1.value和div1["value"]取得该值。
    • FF：不能用div1.value和div1["value"]取。
    • 通用：div1.getAttribute(”value”)。
  • 父节点、子节点和删除节点
    • IE：parentElement、parement.children，element.romoveNode(true)。
    • FF：parentNode、parentNode.childNodes，node.parentNode.removeChild(node)。
  • 画图
    • IE：VML。
    • FF：SVG。
  • CSS：透明
    • IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
    • FF：opacity:0.6。
  • CSS：圆角
    • IE：不支持圆角。
    • FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;。
  • CSS：双线凹凸边框
    • IE：border:2px outset;。
    • FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;。
    • ]]>     http://colee.99n9.com/ie%e4%b8%8efirefox%e7%9a%84%e5%85%bc%e5%ae%b9%e6%80%a7%e5%8c%ba%e5%88%ab/feed/ 0