1、新建一个html文件。
2、为了更好区分,会创建两个按钮标签,然后给这两个按钮标签添加不同的id。
3、引入jquery文件(注:jquery的引入路径一定要正确)。
4、创建加载完成函数,然后创建一个点击按钮获取当前id的函数。
5、保存好html文件后使用浏览器打开,然后点击按钮即可看到点击的id。
6、页面所有代码,如有不懂可把所有代码复制到新建的html文件上,然后修改引入的jquery文件即可。
1、document.body.clientWidth//网页可见区域宽
2、document.body.clientHeight//网页可见区域高
3、document.body.offsetWidth//网页可见区域宽(包括边线的宽)
4、document.body.offsetHeight//网页可见区域高(包括边线的高)
5、document.body.scrollWidth//网页正文全文宽
6、window.screen.availHeight//屏幕可用工作区高度
7、window.screen.availWidth//屏幕可用工作区宽度
8、alert($(document.body).outerWidth(true))//浏览器时下窗口文档body的总宽度 包括border padding margin
9、alert($(document.body).width())//浏览器时下窗口文档body的高度
扩展资料:
1、alert($(window).height())//浏览器时下窗口可视区域高度
2、alert($(document).height())//浏览器时下窗口文档的高度
3、alert($(document.body).height())//浏览器时下窗口文档body的高度
4、alert($(document.body).outerHeight(true))//浏览器时下窗口文档body的总高度 包括border padding margin
5、alert($(window).width())//浏览器时下窗口可视区域宽度
6、alert($(document).width())//浏览器时下窗口文档对于象宽度
7、alert($(document).scrollTop())//获取滚动条到顶部的垂直高度
8、alert($(document).scrollLeft())//获取滚动条到左边的垂直宽度
1.方法如下:获取浏览器显示区域(可视区域)的高度 :
$(window).height()
获取浏览器显示区域(可视区域)的宽度 :
$(window).width()
获取页面的文档高度
$(document).height()
获取页面的文档宽度 :
$(document).width()
浏览器当前窗口文档body的高度:
$(document.body).height()
浏览器当前窗口文档body的宽度:
$(document.body).width()
获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)
$(document).scrollTop()
获取滚动条到左边的垂直宽度 :
$(document).scrollLeft()
获取或设置元素的宽度:
$(obj).width()
获取或设置元素的高度:
$(obj).height()
某个元素的上边界到body最顶部的距离:obj.offset().top(在元素的包含元素不含滚动条的情况下)
某个元素的左边界到body最左边的距离:obj.offset().left(在元素的包含元素不含滚动条的情况下)
返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offset().top(在元素的包含元素含滚动条的情况下)
返回当前元素的左边界到它的包含元素的左边界的偏移量:obj.offset().left(在元素的包含元素含滚动条的情况下)
2.代码如下:
//返回当前页面高度
function pageHeight(){
if($.browser.msie){
return document.compatMode == "CSS1Compat"? document.documentElement.clientHeight :
document.body.clientHeight
}else{
return self.innerHeight
}
}
//返回当前页面宽度
function pageWidth(){
if($.browser.msie){
return document.compatMode == "CSS1Compat"? document.documentElement.clientWidth :
document.body.clientWidth
}else{
return self.innerWidth
}
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)