jquery的height()与js的offsetheight

最新推荐文章于 2021-04-01 15:45:33 发布
最新推荐文章于 2021-04-01 15:45:33 发布
阅读量9.8k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26222859/article/details/75220862
版权 
offsetHeight是js对象所能支持的方法，而$("div:eq(1)")所获得的是一个JQUERY对象，他是不支持offsetHeight的。
offsetHeight只能只能用于获取高度，不能设置高度。
例如：x.offestHeight=y.offsetHeight;  console.log(x.offsetHeight);
打印的仍然是以前x的offsetHeight。

 可以这样修改：
1：$("div:eq(1)").get(0).offsetHeight;           //get()方法返回了DOM元素，可以支持offsetHeight属性，（注意：get()过后返回的是普通DOM元素，已经不支持JQUERY的方法了，但是可以用JS的方法）。
 2，$("div:eq(1)").height() ;     height() 是JQUERY对象所支持的方法。
 

参考文章： 
jquery 怎么用offsetheight

                

        

        

    




    

      

        

            

              
                
                  zhifeng687
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
使用jQuery或者原生js实现鼠标滚动加载页面新数据

				
			

			

				

					10-22
				

			

		

		

			
				
本文将详细讲解如何使用jQuery和原生JavaScript实现这一功能。  首先，我们来看jQuery的实现方式。在jQuery中，可以利用`.scroll()`函数监听窗口滚动事件。当用户滚动到页面底部时，触发特定的加载事件。以下是一个...

			
		

	



                

              
                



	

		

			

				
					
jQuery javascript获得网页的高度与宽度的实现代码

				
			

			

				

					11-24
				

			

		

		

			
				
JavaScript 和 jQuery 提供了多种方法来实现这些功能。下面将详细讲解如何利用这些技术来获取网页的高度、宽度以及相关的位置信息。  首先，我们可以使用原生 JavaScript 来获取网页的几个关键尺寸：  1. **网页可见...

			
		

	



                


  
              

                


	

		

			

				
					
Jquery获取offsetHeight

				
			

			

				

					angou6476的博客
				

				

					12-28
					
					528
					
				

			

		

		

			
				
纯javascript：

window.document.getElementById('MainColumn').offsetHeight

jquery:

$('#id').get(0).offsetHeight



转载于:https://www.cnblogs.com/EasonJim/p/6229441.html

			
		

	





	

		

			

				
					
jQuery height()&offset()

				
			

			

				

					龙腾四海365的专栏
				

				

					04-19
					
					1657
					
				

			

		

		

			
				
jQuery height()&offset()方法详解



*jQuery CSS 操作 - height() 方法


**定义和用法
height() 方法返回或设置匹配元素的高度。


**返回高度
返回第一个匹配元素的高度。
如果不为该方法设置参数，则返回以像素计的匹配元素的高度。
语法
$(selector).height()





**

			
		

	



		

			
		



	

		

			

				
					
JS、JQuery获取各种高度和元素距离

				
			

			

				

					ksx2333的博客
				

				

					04-01
					
					4935
					
				

			

		

		

			
				
文章目录前言1 js原生1.1 offset系列1.2 client系列1.3 scroll系列2 jquery写法2.1 offset和position2.2 元素滚动2.2.1 scrollTop()2.2.2 $(document.body).scrollTop+ $(document.documentElement).scrollTop()2.2.3 $('body,html').scrollTop(60)2.3 元素的尺寸2.3.1 内容尺寸 与css中设置的响应的属性相同2.3.2 内部尺寸2.

			
		

	





	

		

			

				
					
jQuery学习-宽度、高度、坐标操作

				
			

			

				

					qq_43368682的博客
				

				

					08-14
					
					206
					
				

			

		

		

			
				
jQuery设置宽度和高度
宽度操作
$(selector).width();获取
$(selector).width(200);设置

高度操作
$(selector).height();//获取
$(selector).height(200);//设置

此方式的获取和.css获取有什么不同
$(selector).height();//返回200，number类型
$(selector).css(“height”)//返回string类型 200px
jQuery坐标操作
offset()方法
$(s

			
		

	





	

		

			

				
					
jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offset...

				
			

			

				

					weixin_30563917的博客
				

				

					07-12
					
					211
					
				

			

		

		

			
				
前言：jquery对象的height、innerHeight、outerHeight，还有 DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop概念一直都很模糊，借此写个demo看看。

举例看看 jquery 对象的 height、innerHeight、outerHeight 几个区别：

&lt...

			
		

	





	

		

			

				
					
js 中style.height和offsetHeight比较

					
热门推荐

				
			

			

				

					Yelbosh的专栏
				

				

					12-19
					
					1万+
					
				

			

		

		

			
				
看到蓝色经典论坛的一个讨论帖子：


http://bbs.blueidea.com/thread-3072537-1-1.html





从两个人的争论中，更加深入的了解了style.height和offsetHeight的区别




style.height：


只能在div在行内样式设置了height才能获取到

例如：height

 do

			
		

	





	

		

			

				
					
js以及jquery实现手风琴效果

				
			

			

				

					10-20
				

			

		

		

			
				
【JavaScript与jQuery实现手风琴效果】  手风琴效果是一种常见的网页交互设计，它允许用户展开或折叠内容区域，使得信息展示更为有序和紧凑。在本文中，我们将探讨如何使用JavaScript原生代码以及jQuery库来实现这一...

			
		

	





	

		

			

				
					
JS和JQuery实现雪花飘落效果

				
			

			

				

					10-18
				

			

		

		

			
				
在本文中，我们将探讨如何使用JavaScript（JS）和jQuery（JQuery）库来创建一个雪花飘落的动画效果。这个效果常用于冬季主题的网页设计，为用户带来一种浪漫和节日的氛围。以下是如何实现这一效果的详细步骤：  1. *...

			
		

	





	

		

			

				
					
基于JQuery和原生JavaScript实现网页定位导航特效

				
			

			

				

					10-20
				

			

		

		

			
				
本文将探讨如何使用jQuery和原生JavaScript实现这种效果。首先，我们来看一下代码结构。  HTML部分定义了一个固定位置的菜单(#menu)，包含了链接到页面不同区域的列表项。每个列表项的`<a>`标签都带有`href`属性，该...

			
		

	





	

		

			

				
					
js获取height和width的方法说明

				
			

			

				

					10-27
				

			

		

		

			
				
在JavaScript中，获取元素的高度（height）和宽度（width）是网页动态布局和交互的关键部分。以下是一些常用的方法来获取这些属性值：  1. **jQuery 方法**：  - `$(window).height()`：返回浏览器当前窗口可视区域...

			
		

	





	

		

			

				
					
jquery生成二维码

				
			

			

				

					11-30
				

			

		

		

			
				
 canvas.height = qrcodeDiv.offsetHeight;   ctx.drawImage(qrcodeDiv, 0, 0, canvas.width, canvas.height);  var dataURL = canvas.toDataURL('image/png');   // 创建隐藏的可下载链接  var a = document....

			
		

	





	

		

			

				
					
jQuery检测滚动条是否到达底部

				
			

			

				

					11-23
				

			

		

		

			
				
这在jQuery中可以通过监听滚动事件和计算滚动位置来实现。本文将详细讲解如何使用jQuery来检测滚动条是否到达底部。  首先，我们需要了解几个jQuery提供的获取页面和元素位置的函数：  1. `$(document).height()`：...

			
		

	





	

		

			

				
					
jQuery获取浏览器中的分辨率实现代码

				
			

			

				

					10-27
				

			

		

		

			
				
jQuery作为一个流行的JavaScript库，提供了方便的API来获取这些信息。本文将详细介绍如何使用jQuery获取浏览器中的分辨率，并探讨相关的JavaScript方法。  首先，jQuery提供了`$(window).height()`和`$(window)....

			
		

	





	

		

			

				
					
js和JQuery中offset等属性对比

				
			

			

				

					dazwxrt0338的博客
				

				

					09-02
					
					63
					
				

			

		

		

			
				
HTML：

内容在滚动条下面
<div id="outerDiv">
  <div id="myDiv" class="myDiv">会员视频下载</div>
</div>

CSS：

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 400p...

			
		

	





	

		

			

				
					
html元素的 height、clientHeight和offsetHeight之间的区别

				
			

			

				

					zhengb302的专栏
				

				

					06-24
					
					1万+
					
				

			

		

		

			
				
height：指元素内容的高度  ，jQuery中的height()方法返回的就是这个高度。
clientHeight：内容高度+padding高度  ，jQuery中的innerHeight()方法返回的就是这个高度。
offsetHeight：内容高度+padding高度+边框宽度  ，jQuery中的outerHeight()方法返回的就是这个高度。


原文地址：http://w

			
		

	





	

		

			

				
					
用原生javascript写出jquery中slideUp和slideDown效果

					
最新发布

				
			

			

				

					05-26
				

			

		

		

			
				
下面是一个使用原生 JavaScript 实现 jQuery 中 slideUp 和 slideDown 效果的示例：

HTML 代码：

```html
<button id="btn">Toggle</button>
<div id="box" style="height: 200px; background-color: yellow;">Content</div>
```

JavaScript 代码：

```javascript
var box = document.getElementById('box');
var btn = document.getElementById('btn');

function slideUp() {
  var height = box.offsetHeight;
  box.style.transitionProperty = 'height, margin, padding';
  box.style.transitionDuration = '0.5s';
  box.style.boxSizing = 'border-box';
  box.style.height = height + 'px';
  box.offsetHeight;
  box.style.overflow = 'hidden';
  box.style.height = 0;
}

function slideDown() {
  var height = box.offsetHeight;
  box.style.transitionProperty = 'height, margin, padding';
  box.style.transitionDuration = '0.5s';
  box.style.boxSizing = 'border-box';
  box.style.height = 0;
  box.offsetHeight;
  box.style.overflow = 'hidden';
  box.style.height = height + 'px';
}

btn.addEventListener('click', function() {
  if (box.classList.contains('open')) {
    box.classList.remove('open');
    slideUp();
  } else {
    box.classList.add('open');
    slideDown();
  }
});
```

在这个例子中，我们使用了 `transition` 属性来实现动画效果，并使用 `setTimeout` 函数来确保 CSS 的变化应用于 DOM 元素。由于 JavaScript 与 CSS 的执行顺序不同，我们需要使用 `offsetHeight` 属性来强制 JavaScript 引擎重新计算元素的高度，以便确保动画效果可以正确应用。

注意，在这个示例中，我们使用了一个 `.open` 类来标识盒子是否处于打开状态。这个类可以用来在 JavaScript 中切换 slideUp 和 slideDown 效果。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值