php获取页面的可视内容高度,网页制作技巧:获取页面可视区域的高度_css

文章简介:获取页面可视区域高度,获取页面高度,获取滚动条滚动上去的页面高度.

function getWH(){ var wh = {}; "Height Width".replace(/[^/s]+/g,function(a){ var b = a.toLowerCase(); wh[b]=window["inner".concat(a)] document.compatMode ==="css1Compat" && document.documentElement["client".concat(a)] document.body["client".concat(a)]; }); return wh; } 了解两个名词:BackCompat 标准兼容模式关闭(怪异模式) CSS1Compat 标准兼容模式开启 这个方法为获取页面可视区域的高度,普通情况下,window.innerHeight 即可获取,如果是正常模式,并且有clientHeight的情况下, document.documentElement.clientHeight 获取的就是可视区域高度。在怪异模式下,是使用document.body获取。

function getBodyWH(){ var wh = {}; "Height Width".replace(/[^/s]+/g,function(a){ var b = a.toLowerCase(); wh[b]=document.compatMode ==="CSS1Compat" && document.documentElement["scroll".concat(a)] document.body["scroll".concat(a)]; }); return wh; } 这个为获取页面的高度,用于iframe的自适应时候获取。

var ss = {}; ss.scrollTopFn = function(arg){ var a = navigator.userAgent.toLowerCase().indexof("webkit");//判断webkit内核 var scrollTop; if(a>-1document.compatMode =="BackCompat"){ this.scrollTopFn =function(arg){ if(typeof arg == 'number'){ document.body.scrollTop = arg; }else{ return document.body.scrollTop; } } }else{ this.scrollTopFn =function(arg){ if(typeof arg == 'number'){ document.documentElement.scrollTop = arg; }else{ return document.documentElement.scrollTop; } } } return this.scrollTopFn.apply(this,arguments); } 这个返回scrollTop 即滚动上去的页面的高度,因为在webkit内核下渲染的都是使用body,所以和上面两个判断是不一样的。在怪异模式下同样是用body。其他情况都是用documentElment。 这些玩意蛮烦的,今天弄了一天才总结出来了这么些,网上查找也没找到特别标准的说法,就一个个自己试了下,写了几个函数以供以后使用。有人如果有更好的判断方法的话,还望告知,谢谢!

欢迎大家阅读《网页制作技巧:获取页面可视区域的高度_css》,跪求各位点评,若觉得好的话请收藏本文,by 搞代码

e7ce419cf2d6ad34d01da2ceb8829eed.png

微信 赏一包辣条吧~

023a57327877fb4402bcc76911ec18ea.png

支付宝 赏一听可乐吧~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/267304.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

axios和ajax的区别

Axios和Ajax都是用于在Web应用程序中发送HTTP请求的技术,但它们之间存在一些重要的差异。 环境适用性:Axios可以在浏览器和Node.js环境中使用,而Ajax最初是为了在浏览器中创建交互式网页而设计的。易用性:Axios基于Promise&#…

矩阵学习摘记,欢迎指正

矩阵乘法学习摘记 ​ ——JZYshuraK 18.4.8 http://www.matrix67.com/blog/archives/276 例题1 ​ 为什么一定要将本来只有两维的点设为一个\(1\cdot 3​\)矩阵,原因在于,我们在处理所有操作时,必须使得每一个操作矩阵都是正方形(显然)&#…

安装与配置-以前的某个程序安装已在安装计算机上创建挂起的文件操作......

今日在Windows XP SP2的计算机上,安装SQL Server 2000 Standard Edition,安装不上,错误信息如下: 文字描述为: 以前的某个程序安装已在安装计算机上创建挂起的文件操作。运行安装程序之前必须重新启动计算机。 解决方法…

拦截器和过滤器的区别

一、拦截器基于 java 的反射机制,过滤器是基于函数回调的。 二、过滤器依赖于 servlet 容器,拦截器不依赖 servlet 容器。 三、拦截器只对 Action 起作用, 过滤器对所有请求都起左右 四、拦截器可以访问 Action 的上下文 和 值栈里面的对象&a…

php mail ld preload,读《利用环境变量LD_PRELOAD来绕过php disable_function执行系统命令》有感...

今天看来一篇文章:http://cb.drops.wiki/wooyun/drops/tips-16054.html复现了一下,感觉有点坑我把复现的过程,结果和遇到问题在这里总结一下我的实验环境是centos7 php 5.4首先按照要求编译一个so1.创建一个hehe.c#include #include #include…

带预览图的js切换效果!

效果图: js代码: var isIE (document.all) ? true : false;var $ function (id) {return "string" typeof id ? document.getElementById(id) : id; };var Class {create: function() {return function() { this.initialize.apply(this,…

[BZOJ4033][HAOI2015]树上染色(树形DP)

4033: [HAOI2015]树上染色 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 2437 Solved: 1034[Submit][Status][Discuss]Description 有一棵点数为N的树,树边有边权。给你一个在0~N之内的正整数K,你要在这棵树中选择K个点,将其染成黑色&a…

php数组添加省会城市,【JSON数据】中国各省份省会城市经纬度 JSON

[{ name: 北京, value: [ 116.3979471, 39.9081726, 78 ] },{ name: 上海, value: [ 121.4692688, 31.2381763, 75 ] },{ name: 天津, value: [ 117.2523808, 39.1038561, 95 ] },{ name: 重庆, value: [ 106.548425, 29.5549144, 78 ] },{ name: 河北, value: [ 114.4897766, …

CentOS 6.0安装JDK7

CentOS 6.0安装JDK7 - Sea Wang - 博客园CentOS 6.0安装JDK7话说在CentOS下安装JDK7(下载地址:http://www.oracle.com/technetwork/java/javase/downloads/java-se-jdk-7-download-432154.html),同事直接告诉我说双击jdk-7-linux-…

Python成长之路【第七篇】:Python基础之装饰器

一、什么是装饰器 装饰:装饰既修饰,意指为其他函数添加新功能 器:器既函数 装饰器定义:本质就是函数,功能是为其他函数添加新功能 二、装饰器需要遵循的原则 1、不能修改装饰器的源代码(开放封闭原则&#…

php中改变函数路由,php – 如何修改codeigniter中的路由

我终于找到了我想要的东西.以下是我的代码在routes.php中的样子./* Custom Routes. */// Store Normal Pages.$route[home/(:any)] "base/home/$1";$route[about/(:any)] "base/about/$1";$route[services/(:any)] "base/services/$1";$route…

主域控宕机无法恢复后,如何配置辅助域控继续工作

情况如下: 系统基础结构如下:一个主域控,一个辅助域控且都安装AD与DNS集成区。 如果: 主域控宕机且无法恢复,请问辅助域应做些什么才能替代主域控继续工作? 第一步:在辅助域控上清除主域控AD数…

$.get、$.post 和 $().load()

一、$.get() 用于get方式进行异步请求。 结构: $.get( url, data, callback, type); url - 请求路径(string); data - 发送至服务器的键值对数据 (object); callback - 状态为success时的回调函数&a…

sql数据库与oracle数据库同步,[sql数据库同步]Oracle与SQL Server如何实现表数据同步...

在线QQ客服:1922638专业的SQL Server、MySQL数据库同步软件数据库的Oracle版本为10.2,并安装在Linux系统上。数据库SQL Server的版本是SQL 2005,已安装在Windows XP系统上。现在我们需要做的是在两个数据库表之间同步数据。现在,最…

零食嘴----美食领域的美丽说

零食嘴美食分享社区首页 阿里巴巴参谋长曾鸣曾说过:“淘宝等美丽说模式整整等了两年。不仅在女性领域,阿里希望在各个维度都出现‘美丽说’。” 零食嘴就是美食领域美丽说。 所谓的美丽说模式,是指社会化电子商务分享的模式,在一个…

Symfony2

--开放性 --可扩展性 --持续升级性 --有商业背景和支持性 --被广泛使用性 --引领PHP领域最佳实践性 ----官网(查询功能使用) 定义类 类的属性和方法统称为类成员;类的实例化就是通过类的定义创建一个类的对象; 类定义》多个类得实…

oracle导出数据dummy,oracle导出表结构1

oracle导出表结构1.exp/imp工具在cmd中输入 exp username/password连接串回车,在进入如下时,输入no,就ok了导出表数据(yes/no):yes> no;补充----------------exp/imp工具;带参数:rowsy ——带…

Tree.Panel各项属性

1、Ext.tree.TreePanel主要配置项:root:树的根节点。rootVisible:是否显示根节点,默认为true。useArrows:是否在树中使用Vista样式箭头,默认为false。lines:是否显示树线,默认为true…

测试用例设计方法

测试用例设计方法 本篇由本人整理黑盒、白盒、接口测试一系列用例设计方法。 黑盒测试用例设计方法包括等价类划分法、边界值分析法、错误推测法、因果图法、判定表驱动法、正交试验设计法、功能图法、场景图法等。 (一)等价类划分法 定义:等…

oracle 在数据库打开状态下进行备份时_下面描述不正确的是,Oracle数据库DBA面试题50道及答案_经典...

Oracle数据库DBA面试题50道及答案_经典1. 解释冷备份和热备份的不同点以及各自的优点解答:热备份针对归档模式的数据库,在数据库仍旧处于工作状态时进行备份。而冷备份指在数据库关闭后,进行备份,适用于所有模式的数据库。热备份的…