zoukankan      html  css  js  c++  java
  • 常见浏览器的宽高代码写法!有原生JavaScript和jquery两种写法-------------------------------以及我的个人网站

    我的个人网站

    点击链接!欢迎大家访问

    下面是网页一些常见的宽高的获取。。。。。。。。。这是原生的写法(JavaScript)

    网页可见区域宽: document.body.clientWidth
    网页可见区域高: document.body.clientHeight
    网页可见区域宽: document.body.offsetWidth (包括边线的宽)
    网页可见区域高: document.body.offsetHeight (包括边线的高)
    网页正文全文宽: document.body.scrollWidth
    网页正文全文高: document.body.scrollHeight
    网页被卷去的高: document.body.scrollTop
    网页被卷去的左: document.body.scrollLeft
    网页正文部分上: window.screenTop
    网页正文部分左: window.screenLeft
    屏幕分辨率的高: window.screen.height
    屏幕分辨率的宽: window.screen.width
    屏幕可用工作区高度: window.screen.availHeight
    屏幕可用工作区宽度: window.screen.availWidth

    接下来是jquery的写法

    alert($(window).height());
    //浏览器当前窗口可视区域高度
    
    alert($(document).height());
    //浏览器当前窗口文档的高度
    
    alert($(document.body).height());
    //浏览器当前窗口文档body的高度
    
    alert($(document.body).outerHeight(true));
    //浏览器当前窗口文档body的总高度 包括border padding margin
    
    alert($(window).width());
    //浏览器当前窗口可视区域宽度
    
    alert($(document).width());
    //浏览器当前窗口文档对象宽度
    
    alert($(document.body).width());
    //浏览器当前窗口文档body的高度
    
    alert($(document.body).outerWidth(true));
    //浏览器当前窗口文档body的总宽度 包括border padding margin

    原生滚动事件的一些数据计算-------------什么时候到顶部了,居顶部有多少。。。

    window.onscroll = function(){
    
    var scrollT = document.documentElement.scrollTop||document.body.scrollTop;   
     //居上滚动了多少高度
    
    var scrollH = document.documentElement.scrollHeight||document.body.scrollHeight; 
     //页面总高度
    
    var clientH = document.documentElement.clientHeight||document.body.clientHeight;
     //页面可视区域的高度
    
    var s1=document.getElementById("s1").offsetTop;    //元素距顶部有多少像素
    
    
    
    if(scrollT == scrollH - clientH){
    alert("到底部了");
    }else if(scrollT == 0){
    alert("到顶部了");
    }

    jquery滚动常见的一些数据获取。。。

    获取滚动条到顶部的垂直高度 :$(document).scrollTop(); 
    获取滚动条到左边的垂直宽度 :$(document).scrollLeft();
    计算元素位置和偏移量 
    offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。 
    offset(options, results) 
    options.relativeTo  指定相对计 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。 
    options.scroll  是否把 滚动条计算在内,默认TRUE 
    options.padding  是否把padding计算在内,默认false 
    options.margin   是否把margin计算在内,默认true 
    options.border  是否把边框计算在内,默认true 
  • 相关阅读:
    项目中的*签到*小功能!
    亲们,拿到DateTime.Now你是否也是这样比较的?
    <input type="file" />,美化自定义上传按钮
    让你的页面实现自定义的 Ajax Loading加载的体验!
    按回车键提交表单!
    字符串比较大小,CompareTo来搞定!
    巧用Contains可以做到过滤同类项!
    项目开发中遇到的Bug知识整理!
    SharePoint中详细的版本对比
    ASP.NET安全隐患及SharePoint中的Workaround
  • 原文地址:https://www.cnblogs.com/null11/p/5719070.html
Copyright © 2011-2022 走看看