JS中的兼容写法
2017-08-02 本文已影响0人
_Enco_
判断用户输入事件
- 正常浏览器:oninput
- ie678 支持:onpropertychange
$("txt").oninput = $("txt").onpropertychange = function(){
if(this.value == ""){
$("message").style.display = 'block';
}else{
$("message").style.display = 'none';
}
}
封装自己class类,根据类名找对象 同getElementByClassnme
function getClass(classname){
//如果浏览器支持,则直接返回
if(document.getElementsByClassName)
{
return document.getElementsByClassName(classname);
}
// 不支持的 浏览器
var arr = []; // 用于存放满足的数组
var dom = document.getElementsByTagName("*");
//alert(dom.length);
for(var i=0;i<dom.length;i++)
{
if(dom[i].className == classname)
{
arr.push(dom[i]);
}
}
return arr;
}
兄弟节点
- nextSibling 下一个兄弟 亲的 ie 678 认识
- nextElementSibling 其他浏览器认识的
- previousSibling 同理 上一个兄弟
- previousElementSibling
- var div = one.nextElementSibling || one.nextSibling;
子节点
- firstChild 第一个孩子 ie678
- firstElementChild 第一个孩子 正常浏览器
- var one.firstElementChild || one.firstChild;
按钮不可用
- btn.disabled = “disabled” || btn.disabled = true; //不能用
事件兼容性写法
- var event = event || window.event;
拖动 原理 == 鼠标按下 接着 移动鼠标 。
bar.onmousedown = function(){
document.onmousemove = function(){
}
}
拖动的时候不能选中文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
scrollTop获取值的函数封装 scroll
function scroll() {
//判断浏览器的类型
if(window.pageYOffset != null) // ie9+ 和其他浏览器
{
//返回一个对象
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode == "CSS1Compat") // 声明的了 DTD
// 检测是不是怪异模式的浏览器
{
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 剩下的肯定是怪异模式的
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
window.onscroll = function() {
console.log(scroll().top);
}