码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript基础学习--零碎

时间:2017-08-11 12:20:16      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:add   src   []   png   jquery   事件   mod   pre   self   

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基础学习--零碎

标签:add   src   []   png   jquery   事件   mod   pre   self   

原文地址:http://www.cnblogs.com/hihao/p/7344979.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!