当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 一个多浏览器支持的背景变暗的div并可拖动提示窗口功能的代码

Javascript
csdn 博客的css样式 v3
javascript 常用代码技巧大收集
javascript div 弹出可拖动窗口
jQuery 使用个人心得
ajax 文件上传应用简单实现
用正则表达式 动态创建/增加css style script 兼容IE firefox
10个新的最有前途的JavaScript框架
自动完成JS类(纯JS, Ajax模式)
JavaScript 颜色梯度和渐变效果
IE6与IE7中,innerHTML获取param的区别
for 循环性能比较 提高for循环的效率
Ext javascript建立超链接,进行事件处理的实现方法
利用javascript移动div层-javascript 拖动层
jQuery 全选效果实现代码
一个tab标签切换效果代码
提取自百度有啊的css圆角效果
可左右平滑滚动的产品展示效果
响应鼠标变换表格背景或者颜色的代码
ymyang 绘图 实例代码
JS 单击连接保存图片的函数

Javascript 中的 一个多浏览器支持的背景变暗的div并可拖动提示窗口功能的代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 131 ::
收藏到网摘: n/a

兼容IE、Firefox、Opera前几天在网上找了许多资料,看了不少兄弟的源码,一直找不到合适的,要不就是拖动有问题,要不就是不兼容Firefox,所以自已写了一个,下面是代码:
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

IE7.0、Firefox2.0、Opera9.0测试通过
欢迎大家指教批评
前段时间一直在研究Js,网上有很多关于兼容浏览器方面的文章,给大家找了几个:
http://blog.csdn.net/zqian1987/archive/2008/03/02/2140055.aspx
http://www.cnblogs.com/jacklong/archive/2008/01/10/1033954.html
下面写写我这段时间的一些心得,主要介绍兼容IE和FireFox方面,Opera9.0前的版本好像N多东西不支持,暂时不介绍,Opera9.0以后的版本在Javascript解释方面和FireFox比较接近。
我介绍的都是一些细节方面的东西,侧重于写一些不常见的情况,想到新的我会持续补充:
1、创建一个Element,通用的写法为createElement("div")
IE中也可以这样写createElement("<div style='color:#FFFFFF'>"),但Firefox不认
2、IE中的width、height与Firefox中概念不同,IE中width=FireFox中的width+2*borderWidth+2*Padding
参见:http://help.powereasy.net/Template/WEB/1557.html
3、动态添加css代码
cssStr = "p { color:#FF0000;} a { font-size:9pt;}";
var style = win.document.createStyleSheet();
style.cssText = cssStr;FireFox:复制内容到剪贴板代码:
cssStr = "p { color:#FF0000;} a { font-size:9pt;}";
var style = win.document.createElement("style");
style.type = "text/css";
style.innerHTML = cssStr;
win.document.getElementsByTagName("HEAD").item(0).appendChild(style); 4、table在后面添加加行或列,通用写法insertRow(-1),insertCell(-1)
IE中insertRow(),insertCell()这样写也可以,Firefox不认
5、警告对话框alert(),IE中书写时无参数则默认参数为空字符串,Firefox中则必须输入参数,传空参数则要写成alert("");
6、给element.style.width赋值必须写成24px,只写数字24的话,FireFox会不认,IE里都可以
7、在使用Element,并给其绑定了onclick、onmouseover、onmousedown、onmouseout等事件
element.onclick = function() { alert("hello kitty"); };
时,需注意
将此元素添加到上级元素上时要用appendChild,不可以在上级中使用innerHTML操作,这样会使事件无效