📌  相关文章
📜  jQuery | innerWidth() 与示例(1)

📅  最后修改于: 2023-12-03 15:32:12.261000             🧑  作者: Mango

jQuery | innerWidth() 与示例

简介

innerWidth() 方法用于获取元素的宽度，包括内边距(padding)，但不包括边框(border)，可选参数包括margin。

用法
$(selector).innerWidth()

参数selector为必需，表示要获取宽度的元素。

示例
HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>innerWidth 示例</title>
  <style>
    div {
      width: 200px;
      padding: 20px;
      border: 5px solid black;
      margin: 10px;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <h1>innerWidth 示例</h1>
  <div id="example">这是一个div元素</div>
  <p>div元素的宽度为<span id="width"></span>像素</p>
  <button id="get_width">获取宽度</button>
  <button id="set_width">设置宽度为300px</button>
  <button id="reset_width">重置宽度</button>
  <script>
    $("#get_width").click(function() {
      var width = $("#example").innerWidth();
      $("#width").text(width);
    });

    $("#set_width").click(function() {
      $("#example").innerWidth(300);
    });

    $("#reset_width").click(function() {
      $("#example").innerWidth("");
    });
  </script>
</body>
</html>
CSS

在HTML中定义了一个div元素，宽度为200px，内边距(padding)为20px，边框(border)为5px实心黑色，外边距(margin)为10px。另外定义了三个按钮，分别用来获取宽度、设置宽度为300px和重置宽度。

JavaScript

使用jQuery的innerWidth()方法获取div元素的宽度，将宽度显示在页面上。另外添加了按钮事件，当点击设置宽度按钮时，使用innerWidth()方法设置div元素的宽度为300px；当点击重置宽度按钮时，将宽度设置为空字符串，即恢复默认宽度。

运行效果

innerWidth示例运行效果

总结

innerWidth() 方法在获取元素宽度时非常方便，能够包含内边距，避免了手动计算宽度的繁琐。此外，innerWidth()方法还支持设置宽度，操作灵活便捷。