思洋互动网站建设学前班

 jQuery动态读取DIV层的尺寸

jQuery在动态读取DIV的高和宽的时候需要两个固有函数height()、width()。这两个函数分别获取匹配元素对象的高和宽。可以在DIV的单击事件中使用这两个函数来取值。

1．jQuery函数height()--元素高度

该函数获取或者设置元素的高度，单位为像素。其语法形式如下：

1. height([val]) 

注：该函数也可以获取window和document的高。

2．jQuery函数width()--元素宽度

该函数获取或者设置元素的宽度，单位为像素。其语法形式如下：

1. width([val]) 

注：该函数也可以获取window和document的宽。

HTML代码和CSS样式参考光盘内容。这里直接看一下JavaScript功能实现：

1. 1 <script type="text/javascript"> 
2. 2   $(function(){  
3. 3       $("#div1").click(function(){  
4. 4           var width=$(this).width();          //获取元素宽度  
5. 5           var height=$(this).height();        //获取元素高度  
6. 6           alert("层的宽: "+width+"px"+"层的高: "+height+"px");  
7. 7       });  
8. 8   });  
9. 9 </script> 

 

上述代码中的$(this)就代表$("#div1")，效果如图3.5所示。

图3.5  单击获取层的尺寸

上面的代码是直接通过尺寸函数来获取层的大小，也可以通过css()函数来获取大小。但是，有一点需要注意：尺寸函数返回的值是整型数字，但css()函数返回的是带有px像素单位的字符串。

3．jQuery函数css()--样式设定

该函数获取或设定匹配元素的CSS样式。其语法格式如下：

1. css(name)  
2. css(properties)  
3. css(name,value|fn)  

注：properties表示要设置为样式属性的名/值对；fn函数返回要设置的属性值，接受两个参数，index为元素在对象集合中的索引位置，value为原先的属性值。

我们可以将上面的代码稍做修改：

1. 1 <script type="text/javascript"> 
2. 2   $(function(){  
3. 3       $("#div1").click(function(){  
4. 4           var width=$(this).css("width"); //通过CSS函数获取元素宽度  
5. 5           var height=$(this).css("height");   //通过CSS函数获取元素高度  
6. 6           alert("层的宽: "+width+"px"+"层的高: "+height+"px");  
7. 7       });  
8. 8   });  
9. 9 </script>