实现浏览器兼容的innerText
今天学习到了FF不支持innerText,而IE、chrome、Safari、opera均支持innerText。
为了各个浏览器能兼容innerText,必须对js做一次封装。
为啥能实现兼容呢?原因是FF虽然不支持innerText属性,但支持有着类似功能的textContent属性。
以下为封装好的js:
var innerText = {
setInnerText:(function(ele,value){
if(typeof ele.innerText == "string"){
ele.innerText = value;
}else if(typeof ele.textContent == "string"){
ele.textContent = value;
}
}),
getInnerText:(function(ele){
if(typeof ele.innerText == "string"){
return ele.innerText;
}else if(typeof ele.textContent == "string"){
return ele.textContent;
}
})
};
setInnerText:(function(ele,value){
if(typeof ele.innerText == "string"){
ele.innerText = value;
}else if(typeof ele.textContent == "string"){
ele.textContent = value;
}
}),
getInnerText:(function(ele){
if(typeof ele.innerText == "string"){
return ele.innerText;
}else if(typeof ele.textContent == "string"){
return ele.textContent;
}
})
};
我们可以验证下:
html片段:
<body>
<ul id="ul"><li>sdsssssss</li><li>qqqq</li><li>wwww</li><li>eeee</li></ul>
</body>
<ul id="ul"><li>sdsssssss</li><li>qqqq</li><li>wwww</li><li>eeee</li></ul>
</body>
js:
window.onload=function(){
console.log(innerText.getInnerText(ul));
console.log(ul.innerText);
}
console.log(innerText.getInnerText(ul));
console.log(ul.innerText);
}
在FF下的效果(通过ul.innerText返回了undefined):