HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>cssHooks skeleton</title>
  <style>
    body { font-family: sans-serif; padding: 16px; }
    #box {
      width: 120px; height: 80px; background: #3b82f6; color: #fff;
      display: flex; align-items: center; justify-content: center;
      margin: 12px 0;
    }
    button { padding: 8px 14px; cursor: pointer; }
    #out { margin-top: 12px; color: #b45309; font-weight: bold; }
  </style>
</head>
<body>
  <div id="box">Box</div>
  <button type="button" id="go">Set borderRadius via cssHook</button>
  <div id="out">Hook registers on document ready — click the button.</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    (function($) {
      if (!$.cssHooks) {
        $("#out").text("jQuery 1.4.3+ is required for cssHooks.");
        return;
      }
      // Register inside document ready — jQuery may reset hooks if added too early
      $(function() {
        $.cssHooks.borderRadius = {
          get: function(elem) {
            return $.css(elem, "borderRadius");
          },
          set: function(elem, value) {
            elem.style.borderRadius = value;
          }
        };
        $("#go").on("click", function() {
          $("#box").css("borderRadius", "16px");
          $("#out").text(
            "Set with .css('borderRadius', '16px') → read back: " +
            $("#box").css("borderRadius")
          );
        });
      });
    })(jQuery);
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery.cssHooks — basic get/set skeleton (Try It)