HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery .width() getter</title>

  <style>

    body { font-family: sans-serif; padding: 16px; }

    button { font-size: 12px; margin: 2px; padding: 6px 10px; cursor: pointer; }

    p { width: 150px; border: 1px solid red; padding: 8px; }

    #out { color: red; font-weight: bold; margin-top: 12px; }

  </style>

</head>

<body>

  <button type="button" id="getp">Get Paragraph Width</button>

  <button type="button" id="getd">Get Document Width</button>

  <button type="button" id="getw">Get Window Width</button>

  <p>Sample paragraph to test width</p>

  <div id="out">Click a button above.</div>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <script>

    function showWidth(element, width) {

      $("#out").text("The width for the " + element + " is " + width + "px.");

    }

    $("#getp").on("click", function() {

      showWidth("paragraph", $("p").width());

    });

    $("#getd").on("click", function() {

      showWidth("document", $(document).width());

    });

    $("#getw").on("click", function() {

      showWidth("window", $(window).width());

    });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .width() — get paragraph width (Try It)