前端笔记

包括模块、常见问题、css效果、js效果等。仅用于方便查找,提高工作效率。

计算元素的宽与高 –网站常用js代码2

/* 2、计算元素的宽与高 */
// 如果容器里面有img标签,则需要用到 window.onload ,即等图片等资源加载完再执行,否则会出现计算值为0的情况
// 计算出 .about_pic_list里面的.content里面的所有div的宽度总和,比将值作为宽度赋予.content。
window.onload=function(){
    var tn = $('.about_pic_list').children('.content').children().length;		
        var tw = 0;		
        for(var i=0;i<tn;i++){
            tw += $('.about_pic_list').children('.content').children("div").eq(i).outerWidth();			
            };
        $('.about_pic_list').children('.content').css('width',tw);		
     }
// 这个方法可能比较笨且老土,不过还是可以用滴~
// 下面是两个容器设置等高的方法
// 先计算出高度较高的元素的高度,然后再将此值作为高度height赋予另一个元素
window.onload=function(){
    var winwidth = $(window).width();
    if ( winwidth > 768 ) {
 var clh = $(".content-big").outerHeight();
     
 var smh = $(".news-item-pic").outerHeight(); 
 var txth = clh - smh - 30;
 
 $(".news-item-txt").css("height",txth); 	
 } 	
}
// 上面的方法还判断了屏幕的宽度,如果不需要也可以去掉if

 



打赏作者: 一分也是爱


您的支持就是我最大的动力
点赞

发表评论

邮箱地址不会被公开。 必填项已用*标注