首页 > 代码库 > JavaScript基础学习--零碎

JavaScript基础学习--零碎

2024-11-24 14:50:40   203人阅读

1、如果WINDOW对象是常规HTML页面，TOP就是SELF 
     var top = document.getElementById(‘top‘);
     top.innerHTML     //undefined
 
2、ev.stopPropagation(); //阻止事件冒泡
li.onmouseout = function(ev) {
    ev.stopPropagation(); //组织事件冒泡
};
oStar.onmouseout = function() {
    for (var i = 0; i < aLi.length; i++) {
        var img = aLi[i].getElementsByTagName(‘img‘)[0];
        img.src = ‘images/darkstar.png‘;
    }
};
 
3、var aLi_right = aUl[1].getElementsByTagName(‘li‘);     // aLi_right instanceof Array  //false
     --它是object，但是不是数组，所以不能用数组拼接方法concat
     --对象转化并拼接成数组的方式：for循环
var aUl = document.getElementsByTagName(‘ul‘);
var aLi_left = aUl[0].getElementsByTagName(‘li‘);
var aLi_right = aUl[1].getElementsByTagName(‘li‘);
var toConcatArray = function(left, right) {
    var arrLi = [];
    for (var i = 0; i < left.length; i++) {
        arrLi.push(left[i]);
    }
    for (var j = 0; j < right.length; j++) {
        arrLi.push(right[j]);
    }
    return arrLi;
};
var aLi = toConcatArray(aLi_left, aLi_right);


//但是，如果某块中不需要排除其他li，只有目标li，可以直接：
//var aLi = document.getElementsByTagName(‘li‘);
 
4、 获取视口大小和文档大小
/*视口的大小，部分移动设备浏览器对innerWidth的兼容性不好，需要
 *document.documentElement.clientWidth或者document.body.clientWidth
 *来兼容（混杂模式下对document.documentElement.clientWidth不支持）。
 *使用方法 ： getViewPort().width;
 */
function getViewPort() {
    if (document.compatMode == "BackCompat") { //浏览器嗅探，混杂模式
        return {
            width: document.body.clientWidth,
            height: document.body.clientHeight
        };
    } else {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        };
    }
}

//获得文档的大小（区别与视口）,与上面获取视口大小的方法如出一辙
function getDocumentPort() {
    if (document.compatMode == "BackCompat") {
        return {
            width: document.body.scrollWidth,
            height: document.body.scrollHeight
        };
    } else {
        return {
            width: Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth),
            height: Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)
        }
    }
}
clientHeight：内容高度+padding高度  ，jQuery中的innerHeight()方法返回的就是这个高度。
 
offsetHeight：内容高度+padding高度+边框宽度  ，jQuery中的outerHeight()方法返回的就是这个高度
 
注意：用document.getElementById(‘bottom‘).style.[ height | width ]   dom.style.width这种方式只能取到行内属性， 而不是css属性
 
 
 
 
 
 
 
 

JavaScript基础学习--零碎


联系
我们