HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery .width setter</title>

  <style>

    div {

      width: 70px;

      height: 50px;

      float: left;

      margin: 5px;

      background: red;

      cursor: pointer;

      color: #fff;

      text-align: center;

      line-height: 50px;

      font-family: sans-serif;

    }

    .mod { background: blue; cursor: default; }

    .hint { clear: both; padding-top: 70px; color: #64748b; font-size: 14px; }

  </style>

</head>

<body>

  <div>d</div>

  <div>d</div>

  <div>d</div>

  <div>d</div>

  <div>d</div>

  <p class="hint">Click each box once — width shrinks by 8px each time (starts at 50px).</p>

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

  <script>

    var modWidth = 50;

    $("div").one("click", function() {

      $(this).width(modWidth).addClass("mod");

      modWidth -= 8;

    });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .width(50) — setter on click (Try It)