.css('width') 和 .css('height') 与 .width() 和 .height()

html
<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      width: 200px;
      height: 100px;
      background-color: #f0f0f0;
    }
  </style>
  <script src="JS">https://code.jquery.com/jquery-3.6.0.min.JS</a>"></script>
  <script>
    $(document).ready(function() {
      var CSSHeight = $('#box').CSS('height');
      var height = $('#box').height();
      
      console.log('CSS高度：' + CSSHeight); // 输出："CSS高度：100px"
      console.log('计算高度：' + height); // 输出："计算高度：100"
    });
  </script>
</head>
<body>
  <div id="box"></div>
</body>
</html>

元素，并使用.CSS('height')方法和.height()方法分别获取了它的CSS高度和计算高度。然后，我们通过控制台输出这两个值。

在本文中，我们介绍了使用jQuery的.CSS('width')和.CSS('height')方法以及.width()和.height()方法来获取和设置元素的宽度和高度。通过这些方法，开发人员可以轻松地操作元素的尺寸，从而实现更加灵活的网页设计和布局。

参考代码

html
<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      width: 200px;
      height: 100px;
      background-color: #f0f0f0;
    }
  </style>
  <script src="JS">https://code.jquery.com/jquery-3.6.0.min.JS</a>"></script>
  <script>
    $(document).ready(function() {
      var CSSWidth = $('#box').CSS('width');
      var width = $('#box').width();
      var CSSHeight = $('#box').CSS('height');
      var height = $('#box').height();
      
      console.log('CSS宽度：' + CSSWidth);
      console.log('计算宽度：' + width);
      console.log('CSS高度：' + CSSHeight);
      console.log('计算高度：' + height);
    });
  </script>
</head>
<body>
  <div id="box"></div>
</body>
</html>

相关文章

- [使用jQuery的.width()和.height()方法获取和设置元素的宽度和高度](https://example.com/article-1)

- [使用jQuery的.CSS()方法获取和设置元素的CSS属性](https://example.com/article-2)