jquery css事件编程尺寸设置

前端老码农

于 2019-10-31 18:41:47 发布

阅读量120

点赞数

分类专栏：前端文章标签： jquery

原文链接：https://www.mk2048.com/blog/blog.php?id=hbbbj0cb2a1j&title=jquery+css%E4%BA%8B%E4%BB%B6%E7%BC%96%E7%A8%8B+%E5%B0%BA%E5%AF%B8%E8%AE%BE%E7%BD%AE

版权

前端专栏收录该内容

2065 篇文章

订阅专栏

本文介绍如何使用jQuery进行元素尺寸的设置与获取，通过示例代码展示了width()和height()方法的应用，实现动态调整div元素的宽度和高度。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>jquery css事件编程  尺寸设置</title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <style type="text/css"> 
        div{position:absolute;width:100px;height:100px;left:100px;top:100px;border:1px solid red;}
  </style>
  <script  type="text/javascript" src="jquery-1.7.1.min.js"></script>
  <script type="text/javascript">
    /* 尺寸操作 
        width()   //获取宽度
        width(value) //设置宽度
        height //获取高度
        height(value)  //设置高度
    */
        window.onload=function(){
            $('#btnOk').click(function(){
                $('#div1').width(500);
                $('#div1').height(600);
            });
        };
  </script>
 </head>
 <body>

    <div id="div1">test1</div>

 <input type="button" id='btnOk' value='确定'  />
 </body>
</html>