DIV CSS 佈局教程網

今天在完成前端的簡單練習時發現了一些兼容性的問題,百度後得以解決.
這裡主要討論Firefox與Chrome的兼容性問題.

innerContent 與 innerText

在javascript中, 為了獲取節點的文本, 我們可以考慮使用節點的textContent、或者innerText,
然而,兩者都並不能很好對所有浏覽器進行兼容.

• textContent: 不支持低版本 IE; 兼容 Chrome / Firefox / Safari / Opera / IE9.
• innerText: 不支持Firefox; 兼容其他浏覽器;

為了保證兼容性, 可以通過自定義的函數來解決;從另一位博主中找到了可借鑒的代碼:

var div = document.getElementById("content");
function getInnerText(element) {
    return (typeof element.textContent == "string") ? element.textContent : element.innerText;
}
function setInnerText(element, text) {
    if (typeof element.textContent == "string") {
        element.textContent = text;
    } else {
        element.innerText = text;
    }
}
setInnerText(div, "Hello world!");
alert(getInnerText(div)); //"Hello world!"

相關文檔: MDN textContent;

event的兼容性問題

開發過程中,我們會給節點添加事件監聽器,例如:

element.addEventListener("click", HandleClick);

function HandleClick() {
    console.log(event.target);
}

為了在HandleClick()函數中獲取到觸發該函數的對象,我們可能會用到event.target, 這段代碼可以在Chrome上正常運行,但在Firefox中出現報錯,
控制台將顯示不存在event對象.