`
enjoy2010
  • 浏览: 23281 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

js IE 和火狐用法区别

阅读更多

禁止选择
    unselectable="on"(off): IE/Opera
    style="-moz-user-select:none": FireFox(JS:element.style.MozUserSelect = "none";)
    style="-khtml-user-select:none": Safari(JS:element.style.KhtmlUserSelect)
    onselectstart="return false": IE

取消选择
    if(document.selection && document.selection.clear) document.selection.clear(); // IE
    else if(window.getSelection && window.getSelection().removeAllRanges) window.getSelection().removeAllRanges(); // FireFox/Opera/Safari

当前焦点是哪个控件
    document.activeElement // IE, FF3.0+

获取样式的实际属性值
    IE: 对象.currentStyle.需要访问的属性
    W3C: window.getComputedStyle("对象",null).需要访问的属性(第2个参数为伪元素,如:hover,:first-letter,:before等,是必须的)
    function getStyle(element, style){
        var strValue = "";
        if(document.defaultView && document.defaultView.getComputedStyle){
            strValue = document.defaultView.getComputedStyle(element, "").getPropertyValue(strCssRule);
        }
        else if(element.currentStyle){
            strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
                return p1.toUpperCase();
            });
            strValue = element.currentStyle[strCssRule];
        }
        return strValue;
    }
    // 假设someElement是DOM中某对象的引用,那么通过以下方法可以获得该对象下的字体大小:
    // var fontSize = getStyle(someElement, "font-size");
    // 注意, 对于缩略式表达式, FF无法获取! 例如“padding:4px”, 在FF下面, 只能按照标准返回"padding-left"

Array对象
    var array = new Array(); // new Array(20); // 声明一个Array对象,并对数组进行初始化,设置数组的大小为20
    var array = new Array("red","yellow","blue"); // 或 ["red","yellow","blue"]; // 声明一个数组,并通过参数给数组设置初始值
    array.length; // 3
    array.toString(); // 以,串连数组各项: red,yellow,blue
    array.join("-"); // 以参数串连数组各项: red-yellow-blue
    array.push("black"); // 在数组的尾部添加一个新项: ["red","yellow","blue","black"]
    array.pop(); // 将数组尾部的一个项删除掉: ["red","yellow","blue"]
    array.shift(); // 将数组头部的一个项删除掉: ["yellow","blue"]
    array.splice(start, num); // 将数组中从start开始num项从数组中删除掉
    array.splice(start, num, "xx"); // 将数组中从start开始的num项删除掉,第三个参数开始是要插入到数组中去的新项,将会从start位置开始插入。如果num为0则不删除任何数组项
    array.reverse(); // 将数组顺序反过来
    array.sort(); // 数组排序

IE不支持动态修改单选框的名称的解决方法
    document.createInput = function(name) {
        // IE doesn’t allow the name attribute to be changed after the element is created
        // http://www.iteye.com/topic/26917  |  http://alt-tag.com/blog/archives/2006/02/ie-dom-bugs/
        var element = null;
        try {
            element = document.createElement("<input type=\""+type+"\" name=\""+name+"\">"); // IE下的创建方式
        } catch (e) { // 标准浏览器下会报错, 应采用以下的创建方式
            element = document.createElement("input");
            element.type = type;
            element.name = name;
        }
        return element;
    }

Form提交到新开窗口
    // IE8下似乎有些问题, 会打开一个空窗口, 提交时再打开一个新窗口
    form.action="...";
    form.target="xxx";
    window.open("about:blank","xxx","width=100,height=100,top=100,left=100");
    form.submit();

区分中英文判断长度
    function calculateCount(str) {
        var count=0;
        for (var i = 0; i < str.length; i++) {
            var c = str.charAt(i);
            if ((c >= "!") && (c <= "\u20AC")||(c==" ") )
                count += 1;
            else
                count += 2;
        }
        return count;
    }
遍历输出属性
    <div id="message" style="position:absolute;border:1px solid #CCCCCC;z-index:1;background-color:#FFFFE1;" />
    <script language="JavaScript">
        var message = document.getElementById("message");
        var text = "";
        for (var property in document)
            text += property + " = " + document[property] + "<br/>";
        message.innerHTML = text;
    </script>
判断对象是否存在某个方法
    "methodName" in object
    如: alert("value" in document.getElementById("userName"));
值变化时触发事件
    IE: onpropertychange
    Firefox|Opera: oninput
另一种访问属性的方式
    var myString = new String("Hello world");
    alert(myString.length);
    alert(myString["length"]);
    alert(myString["toUpperCase"]());

随机数
    function randomBetween(min, max) {
        return min + Math.floor(Math.random() * (max - min + 1));
    }

取input元素的原始值
    defaultValue

JSON
    JSON对象是一个无序的“‘名称/值’对”集合。一个对象以“{”开始,“}”结束。每个“名称”后跟一个“:”;“‘名称/值’ 对”之间使用“,”分隔
    function showJSON() {
        var user =
        {
            "username": "andy",
            "age": 20,
            "info": {"tel": "123456", "cellphone": "98765"},
            "address":
                [
                    {"city": "beijing", "postcode": "222333"},
                    {"city": "newyork", "postcode": "555666"}
                ]
        };

        alert(user.username);
        alert(user.age);
        alert(user.info.cellphone);
        alert(user.address[0].city);
        alert(user.address[0].postcode);

        user.username = "Tom";
        alert(user.username);
        alert(user.gender==undefined); // 没有的节点为undefined
    }

预载图片
    <script language="javascript">
        var tmpImage = new Image(10, 10); // 宽度, 高度
        tmpImage.src = "image.gif"; // 图片路径
    </script>

增删<select>的<option>
    var item = document.createElement("option");
    var sex = document.getElementById("sex")
    sex.options.add(item); //增加一项
    // sex.insertBefore(item, sex.options[0]); //插入一项(应先判断length是否大于0)
    item.value = "1"; //为项设置属性必须在该项已增加到options中之后
    item.text = "女";
    sex.value = "1"; //选中此项
    sex.remove(0); //删除第一项(此方法是<select>的,而不是options的)
    var len = sex.options.length; //必须提前获取options.length,因为此值在删除的过程中会被改变
    for(var i=0; i<len; i++) //删除所有项
        sex.remove(0);

跨浏览器处理事件
    function(e) {
        var evt = e || window.event;
        var src = evt.target ? evt.target : evt.srcElement; // 事件源(哪个对象触发的事件)
        var to = (evt.relatedTarget) ? evt.relatedTarget : evt.toElement; // 目标(仅部分事件有效,如mouseout鼠标滑向了哪个对象)
    }

对话框
    alert("...");
    var rtn=confirm("..."); if(rtn!="0") {...}
    var rtn=prompt("提示文本", "默认值");

跳转
    window.location.href="../index.jsp";

加入收藏夹
    window.external.addFavorite('http://www.google.com/','Google');
    window.external.addFavorite(location.href, document.title);

设为首页
    this.setHomePage('http://www.google.com');

Dom操作
    属性:
        1. Attributes    存储节点的属性列表(只读)
        2. childNodes    存储节点的子节点列表(只读)
        3. dataType    返回此节点的数据类型
        4. Definition    以DTD或XML模式给出的节点的定义(只读)
        5. Doctype    指定文档类型节点(只读)
        6. documentElement    返回文档的根元素(可读写)
        7. firstChild    返回当前节点的第一个子节点(只读)
        8. Implementation    返回XMLDOMImplementation对象
        9. lastChild    返回当前节点最后一个子节点(只读)
        10. nextSibling    返回当前节点的下一个兄弟节点(只读)
        11. nodeName    返回节点的名字(只读)
        12. nodeType    返回节点的类型(只读)
        13. nodeTypedValue    存储节点值(可读写)
        14. nodeValue    返回节点的文本(可读写)
        15. ownerDocument    返回包含此节点的根文档(只读)
        16. parentNode    返回父节点(只读)
        17. Parsed    返回此节点及其子节点是否已经被解析(只读)
        18. Prefix    返回名称空间前缀(只读)
        19. preserveWhiteSpace    指定是否保留空白(可读写)
        20. previousSibling    返回此节点的前一个兄弟节点(只读)
        21. Text    返回此节点及其后代的文本内容(可读写)
        22. url    返回最近载入的XML文档的URL(只读)
        23. Xml    返回节点及其后代的XML表示(只读)

    方法:
        1. appendChild    为当前节点添加一个新的子节点,放在最后的子节点后
        2. cloneNode    返回当前节点的拷贝
        3. createAttribute    创建新的属性
        4. createCDATASection    创建包括给定数据的CDATA段
        5. createComment    创建一个注释节点
        6. createDocumentFragment    创建DocumentFragment对象
        7. createElement    创建一个元素节点
        8. createEntityReference    创建EntityReference对象
        9. createNode    创建给定类型,名字和命名空间的节点
        10. createPorcessingInstruction    创建操作指令节点
        11. createTextNode    创建包括给定数据的文本节点
        12. getElementsByTagName    返回指定名字的元素集合
        13. hasChildNodes    返回当前节点是否有子节点
        14. insertBefore    在指定节点前插入子节点
        15. Load    导入指定位置的XML文档
        16. loadXML    导入指定字符串的XML文档
        17. removeChild    从子结点列表中删除指定的子节点
        18. replaceChild    从子节点列表中替换指定的子节点
        19. Save    把XML文件存到指定节点
        20. selectNodes    对节点进行指定的匹配,并返回匹配节点列表
        21. selectSingleNode    对节点进行指定的匹配,并返回第一个匹配节点
        22. transformNode    使用指定的样式表对节点及其后代进行转换
        23. transformNodeToObject    使用指定的样式表将节点及其后代转换为对象
    其他:
        1. document.documentElement    返回文档的根节点
        2. document.activeElement    返回当前文档中被击活的标签节点
        3. event.fromElement    返回鼠标移出的源节点
        4. event.toElement    返回鼠标移入的源节点
        5. event.srcElement    返回激活事件的源节点

搜索节点
    function searchNode(item, tagName) {
        while(item != null) {
            if(item.tagName == tagName) return item;
            var result = searchNode(item.firstChild, tagName); // 深度优先
            if(result != null) return result;
            item = item.nextSibling;
        }
        return null;
    }

分享到:
评论

相关推荐

    js在IE和fireFox的区别

    ### JavaScript在Internet Explorer (IE) 和 Firefox 中的区别与解决方案 #### 一、获取HTML元素的方式差异 1. **通过ID获取元素**: - **IE**:支持`document.getElementById`和`document.all`两种方式。 - ...

    javascript在IE和Firefox中兼容性问题

    IE提供了ActiveXObject,可以创建XMLDOM对象,如`new ActiveXObject("MSXML2.DOMDocument")`,而Firefox和其他遵循W3C标准的浏览器则使用`document.implementation.createDocument()`方法。 2. **ChildNodes测试....

    Ie和firefox的Js区别

    JavaScript是一种广泛用于网页开发的脚本语言,它在不同的浏览器中有不同的实现,其中最显著的区别在于Internet Explorer(IE)和Mozilla Firefox(Firefox)。以下是一些关键的区别点: 1. **对象问题** - **...

    JavaScript在IE和Firefox(火狐)的不兼容问题解决

    标题与描述均聚焦于“JavaScript在IE和Firefox(火狐)的不兼容问题解决”,这表明文章旨在探讨并提供解决方案来处理在不同浏览器环境下的JavaScript兼容性问题,尤其是在Internet Explorer(IE)和Mozilla Firefox...

    Javascript的IE和Firefox(火狐)兼容性

    ### Javascript的IE与Firefox(火狐)兼容性解决方案 在Web开发过程中,浏览器兼容性问题一直是开发者们关注的重点之一。由于不同的浏览器对于Web标准的支持程度存在差异,这导致了同样的代码在不同浏览器中的表现...

    js在IE和Firefox不同之处

    ### js在IE和Firefox不同之处 在Web开发中,JavaScript(简称JS)是实现网页交互性的核心语言之一。然而,由于不同的浏览器对于JS标准的支持程度有所差异,这往往会导致跨浏览器兼容性问题的出现。IE(Internet ...

    IE与Firefox的事件区别

    而在Firefox及支持DOM的浏览器中,使用`addEventListener`和`removeEventListener`方法,如下所示: ```javascript var obj = document.getElementById("id"); var fnClick = function() { alert("ss"); }; var ...

    IE和Firefox对JavaScript的兼容

    再者,CSS样式和JavaScript的交互在IE和Firefox上也有区别。IE有时会忽视标准的style属性,而是使用专有的currentStyle属性来获取元素的样式,而Firefox使用window.getComputedStyle()。此外,对于某些CSS属性,如...

    Javascript在IE和FireFox中的兼容处理

    - IE使用`event.clientX`和`event.clientY`,Firefox使用`event.pageX`和`event.pageY`。可以使用`event.clientX + document.body.scrollLeft`和`event.clientY + document.body.scrollTop`来兼容。 7. **event的...

    Javascript的IE和Firefox兼容性参考

    JavaScript是一种广泛应用于网页开发的脚本语言,但在不同的浏览器中,其执行方式可能存在差异,特别是老版本的Internet Explorer(IE)和Firefox。由于历史原因,IE对某些特性有着独特的实现,而Firefox则遵循更...

    Javascript的IE和Firefox兼容性问题集合

    9. **CSS3动画和过渡**:Firefox和IE对CSS3动画和过渡的支持不同,可能需要使用JavaScript模拟,或者使用CSS3前缀(如-moz-、-webkit-)。 10. **盒模型**:IE使用怪异盒模型,而其他浏览器遵循W3C标准盒模型。在...

    mxGraph破解包含ie和firefox

    mxGraph是一款强大的...通过以上方法,开发者可以逐步解决mxGraph在IE和Firefox中的兼容性问题,实现更广泛的支持。不过,随着IE的逐渐淘汰,重点可能更多地转移到如何优化mxGraph在现代浏览器和移动设备上的体验。

    js在IE与firefox的差异集锦

    特别是在使用JavaScript编程语言时,IE和Firefox两个浏览器在很多方面的实现都存在差异。本文将详细介绍这些差异并提供相应的解决方法。 1. 关于innerText属性的支持: Firefox浏览器不支持innerText属性,而支持...

    JS的IE和Firefox兼容性

    JavaScript在不同浏览器之间的兼容性问题一直是开发者面临的重要挑战,尤其是早期的Internet Explorer(IE)和Mozilla Firefox(MF)之间存在显著差异。以下是一些关键的兼容性问题及其解决方案: 1. **document....

    JS导入导出Excel 兼容IE、Firefox、Chrome等浏览器

    "JS导入导出Excel 兼容IE、Firefox、Chrome等浏览器"这一技术主题,聚焦于如何使用JavaScript(JS)在各种浏览器环境下处理Excel文件,包括古老的Internet Explorer(IE)、Firefox以及Chrome。下面我们将深入探讨这...

    ie 和 firefox 的javascript 兼容问题(网上下载的).doc

    ### IE和Firefox的JavaScript兼容性问题详解 #### 1. `document.formName.item("itemName")` 问题 在处理表单元素时,IE 和 Firefox 对 `document.formName.item("itemName")` 的支持存在差异。 **说明:** - **...

    让IE和火狐同时兼容

    特别是在早期的Web时代,Internet Explorer(简称IE)与Mozilla Firefox(简称火狐)这两款浏览器之间存在着显著的差异,这使得页面设计师不得不花费大量时间去解决它们之间的兼容性问题。本文将详细介绍如何使网站...

    js、css在IE和火狐上的差异和处理方法

    以下是对"js、css在IE和火狐上的差异和处理方法"的详细解释。 1. **CSS差异**: - **盒模型**:IE采用的是自己的盒模型,将边框和内填充包含在元素的宽度和高度中,而Firefox遵循W3C标准盒模型,宽度和高度不包括...

Global site tag (gtag.js) - Google Analytics