HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>cssHook normalized names</title>
  <style>
    body { font-family: sans-serif; padding: 16px; }
    .box {
      width: 100px; height: 70px; background: #10b981; color: #fff;
      display: inline-flex; align-items: center; justify-content: center;
      margin: 8px 8px 8px 0;
    }
    button { margin: 4px 4px 4px 0; padding: 8px 12px; cursor: pointer; }
    #out { margin-top: 12px; font-weight: bold; color: #047857; }
  </style>
</head>
<body>
  <div class="box" id="a">A</div>
  <div class="box" id="b">B</div>
  <div>
    <button type="button" id="camel">.css('borderRadius', '10px')</button>
    <button type="button" id="hyphen">.css('border-radius', '20px')</button>
  </div>
  <div id="out">Both buttons use the same cssHook under the hood.</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    (function($) {
      function styleSupport(prop) {
        var vendorProp, supportedProp,
          capProp = prop.charAt(0).toUpperCase() + prop.slice(1),
          prefixes = ["Moz", "Webkit", "ms"],
          div = document.createElement("div");
        if (prop in div.style) {
          supportedProp = prop;
        } else {
          for (var i = 0; i < prefixes.length; i++) {
            vendorProp = prefixes[i] + capProp;
            if (vendorProp in div.style) {
              supportedProp = vendorProp;
              break;
            }
          }
        }
        div = null;
        return supportedProp || prop;
      }
      $(function() {
        var borderRadius = styleSupport("borderRadius");
        $.cssHooks.borderRadius = {
          get: function(elem) {
            return $.css(elem, borderRadius);
          },
          set: function(elem, value) {
            elem.style[borderRadius] = value;
          }
        };
        $("#camel").on("click", function() {
          $("#a").css("borderRadius", "10px");
          $("#out").text("Box A borderRadius → " + $("#a").css("borderRadius"));
        });
        $("#hyphen").on("click", function() {
          $("#b").css("border-radius", "20px");
          $("#out").text("Box B border-radius → " + $("#b").css("border-radius"));
        });
      });
    })(jQuery);
  </script>
</body>
</html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
jQuery.cssHooks — hyphenated vs camelCase (Try It)
