$(document).height()和$(window).height()区别

最新推荐文章于 2024-03-20 09:23:44 发布
最新推荐文章于 2024-03-20 09:23:44 发布
阅读量2.1k 收藏
点赞数
文章标签： document.height window.height
本文解释了$(window).height()与$(document).height()的区别，前者为浏览器可视区域高度，后者为文档总高度。同时介绍了如何使用$(document).scrollTop()获取垂直滚动距离及判断是否滚动到页面顶部或底部的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

$(window).heigth()指 默认浏览器滚动区域的高度，而$(document).height()指整个文档内容的高度。

而且当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变，但是jQuery(document).height()是不变的。



$(document).scrollTop() 获取垂直距离，即当前滚动的地方到整个页面顶端的距离；

$(document).scrollLeft() 这是获取水平滚动条的距离； 
 

要获取顶端 只需要获取到scrollTop()==0的时候  就是顶端了

 

 

要获取底端 只要获取scrollTop()>=$(document).height()-$(window).height()  就可以知道已经滚动到底端了
 

 
 

 


 
 


 
 


 
 


 

                

        

    

  



    

      

        

            

              
                
                  cc蒲公英
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
浅谈DOCTYPE对$(window).height()取值的影响

				
			

			

				

					09-01
				

			

		

		

			
				
下面小编就为大家带来一篇浅谈DOCTYPE对$(window).height()取值的影响。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	



                

            
              



	

		

			

				
					
浅谈$(document)和$(window)的区别

				
			

			

				

					09-03
				

			

		

		

			
				
`$(document).height()` 和 `$(window).height()` 返回的值不同。前者返回整个文档的高度，包括不可见的部分，比如滚动条下的内容；后者则返回浏览器当前可视区域的高度，即用户能看到的窗口高度。在有滚动条的情况...

			
		

	



              


  
              

                


	

		

			

				
					
(document).height()与$(window).height()

				
			

			

				

					aijue2015的博客
				

				

					01-06
					
					401
					
				

			

		

		

			
				
jQuery(window).height()代表了当前可见区域的大小，而jQuery(document).height()则代表了整个文档的高度，可视具体情况使用.
 注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变，但是jQuery(document).height()是不变的。

$(document).sc...

			
		

	





	

		

			

				
					
$(document).height()与$(window).height()

				
			

			

				

					☂yǒng 超-站在巨人的肩膀上来创新.
				

				

					08-11
					
					1187
					
				

			

		

		

			
				

jQuery(window).height()代表了当前可见区域的大小，而jQuery(document).height()则代表了整个文档的高度，可视具体情况使用.
  注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变，但是jQuery(document).height()是不变的。
 
$(document).scrol

			
		

	



		

			
		



	

		

			

				
					
$(document).height()与$(window).height()区别

				
			

			

				

					FEE
				

				

					08-30
					
					2015
					
				

			

		

		

			
				
1.$(document).height()代表整个文档(页面)的高度 
  $(window).height()则代表当前可见区域的大小 
所以当浏览器窗口大小发生变化时，$(document).height()值不变，$(window).height()发生变化2.$(document).scrollTop() 获取垂直滚动的距离  即当前滚动的地方的窗口顶端到整个页面顶端的距离 
  $(do

			
		

	





	

		

			

				
					
$(document).height()获取文档的高度

				
			

			

				

					jQuery,CSS,Asp.net及前端开放问题汇总
				

				

					12-09
					
					2549
					
				

			

		

		

			
				
通过《$(document).height()》获取文档的高度


需注意以下两点：
1.当$(document).height()放在head中时
获取的值与$(window).height() 值相同 即为文档可视区域的高度。


2.顾名思义
调用时需放在页面底部 页面加载完成后执行 此时的值才是正确的

			
		

	





	

		

			

				
					
$(document).height()、$(document).scrollTop()

				
			

			

				

					QDY5945的博客
				

				

					11-19
					
					762
					
				

			

		

		

			
				
(document).height()、$(document).scrollTop()： jQuery(window).height()代表了当前可见区域的大小，而jQuery(document).h...

			
		

	





	

		

			

				
					
由document.body和document.documentElement想到的

				
			

			

				

					09-06
				

			

		

		

			
				
在Web开发中，理解和掌握`document.body`和`document.documentElement`的区别至关重要，尤其是在处理页面布局和兼容性问题时。这两个对象分别代表了HTML文档的不同部分：`document.body`指的是HTML文档的实际内容...

			
		

	





	

		

			

				
					
$(document).ready(function() {     fetchScroll();     page();     function page() {         var windowWidth = $(window).width(), documentHeight = $(document).height(), windowHeight = $(window).height();         if (windowWidth < 1280) {             $(".page").width(1280);         } else {             $(".page").width(windowWidth);         }     }     $(window).resize(function() {         page();     });     $(".j-btn-menu").on("click", function(e) {         e.preventDefault();         $(".module").toggleClass("is-open");         var menu = $(this).data("menu");         $("#" + menu).slideToggle("fast");     });     $(".module").hover(function() {         var $this = $(this);         $this.find(".info-short").stop().css({             opacity:0         }, 500);         $this.find(".info-full").stop().slideDown();     }, function() {         var $this = $(this);         $this.find(".info-full").stop().slideUp("fast");         $this.find(".info-short").stop().animate({             opacity:1         }, 500);     }); });

				
			

			

				

					03-23
				

			

		

		

			
				
这段代码是用来控制网页的自适应和菜单的开关。当页面加载完成后，会执行fetchScroll()和page()函数。page()函数会获取窗口的宽度、文档的高度和窗口的高度，并根据窗口宽度的大小来设置页面的宽度。当窗口大小改变...

			
		

	





	

		

			

				
					
(document).height()、$(document).scrollTop()

				
			

			

				

					倾城一笑stu
				

				

					09-20
					
					1978
					
				

			

		

		

			
				
jQuery(window).height()代表了当前可见区域的大小，而jQuery(document).height()则代表了整个文档的高度，可视具体情况使用.

注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变jQuery(document).height()是不变的。

$(document).scrollTop() 获

			
		

	





	

		

			

				
					
$(document).height();文档高度

				
			

			

				

					Alisa_vc的博客
				

				

					09-08
					
					640
					
				

			

		

		

			
				
$(document).height();//文档高度

$(window).height();//是文档窗口高度

$("div").offset().top//是标签距离顶部高度

$(window).scrollTop();//是滚动条高度 和$(document).scrollTop()效果一样 但是$(window).scrollTop() 兼容性好

$(".footer").heig...

			
		

	





	

		

			

				
					
$(window).height()

				
			

			

				

					layman1024的博客
				

				

					05-02
					
					1087
					
				

			

		

		

			
				
$(window).height();           //浏览器当前窗口可视区域高度 
$(document).height();         //浏览器当前窗口文档的高度 
$(document.body).height();    //浏览器当前窗口文档body的高度

			
		

	





	

		

			

				
					
jQuery $(document).height()与$(window).height()区别

					
最新发布

				
			

			

				

					_江屿_
				

				

					03-20
					
					446
					
				

			

		

		

			
				
jQuery $(document).height()与$(window).height()区别

			
		

	





	

		

			

				
					
$(document)和$(window)

				
			

			

				

					casanover
				

				

					10-09
					
					312
					
				

			

		

		

			
				
一直搞不大清楚什么区别，今天特地找了找资料
$(document)   //获取文档对象
$(window)   //获取窗口对象，也就是浏览器客户区



举个鲜明的例子：
$(document).height()
$(window).height()
当页面内元素很多出现滚动条时，能很好的理解区别。

			
		

	





	

		

			

				
					
$(window).height() 和 $(document).height()的区别

				
			

			

				

					weixin_34185364的博客
				

				

					11-28
					
					475
					
				

			

		

		

			
				
 
$(window).height() 和 $(document).height()的区别
$(window).height()代表了当前可见区域的大小，$(document).height()则代表了整个文档的高度，可视具体情况使用.
当浏览器窗口大小改变时(如最大化或拉大窗口后) ，$(window).height() 随之改变，但是 $(document).height()是不变的。...

			
		

	





	

		

			

				
					
setInterval(function(){ var quguan = $(document).height()-$(window).height();             $(document).scrollTop(quguan);             $("button.Fb2PQj.nMa6XB").click() },6000)     不同按钮，但是同一个属性的class如何实现鼠标的单机效果

				
			

			

				

					05-18
				

			

		

		

			
				
可以使用 jQuery 的 `click()` 方法来实现鼠标单击效果。具体实现方法如下：

1. 给需要单击的按钮添加一个唯一的 ID，比如 `#button1` 和 `#button2`。

2. 使用 jQuery 的 `click()` 方法来绑定单击事件：

   ```javascript
   $("#button1").click(function() {
     // 执行单击事件的代码
   });
   
   $("#button2").click(function() {
     // 执行单击事件的代码
   });
   ```

3. 在单击事件中，可以使用 `$(this)` 来获取当前被单击的按钮，然后可以使用 `addClass()` 和 `removeClass()` 方法来添加或删除 CSS 类，从而实现鼠标单击效果。

   ```javascript
   $("#button1").click(function() {
     // 添加 CSS 类名
     $(this).addClass("active");
   
     // 移除 CSS 类名
     setTimeout(function() {
       $(this).removeClass("active");
     }, 1000);
   });
   
   $("#button2").click(function() {
     // 添加 CSS 类名
     $(this).addClass("active");
   
     // 移除 CSS 类名
     setTimeout(function() {
       $(this).removeClass("active");
     }, 1000);
   });
   ```

以上代码中，`addClass()` 方法用于添加 CSS 类名，`removeClass()` 方法用于移除 CSS 类名，`setTimeout()` 方法用于延时执行移除 CSS 类名的操作。注意，在 `setTimeout()` 中使用了一个函数表达式来获取当前被单击的按钮，因为在 `setTimeout()` 中，`this` 指向的是 `window` 对象。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值