jquery - 为什么通过 jQuery 放大(css)不起作用

Question

我知道这可能是一个愚蠢的问题，但我研究了很多，但没有找到原因。我已经实现了 2 个简单的 jQuery 函数来缩小和放大

$("#zoomOutBtn").click(function(){
    var zoom = $("#treeContainer").css("zoom");
    zoom = ((zoom - 0.1) * 100) + "%";
    $("#myDiv").css("zoom", zoom);
  });

  $("#zoomInBtn").click(function(){
    var zoom = $("#treeContainer").css("zoom");
    zoom = ((zoom + 0.1) * 100) + "%";
    $("#myDiv").css("zoom", zoom);
  });

问题是缩小可以工作，但放大则不行，除非在缩小之前运行。

Answer 1

+ 是重载的，当您将它与数字一起使用时，它意味着加法，但当您在至少一个操作数是字符串的情况下使用它时，它意味着连接。从 css 获得的值是一个字符串，因此 zoom + 0.1 最终将附加字符 0， . 和 1 到字符串末尾(例如 100%0.1 或其他)，而不是添加值 0.1 到它。

要解决此问题，请先转换为数字:

zoom = ((parseFloat(zoom) + 0.1) * 100) + "%";

(我在那里使用了 parseFloat 来允许浏览器在返回的值中包含 %。parseFloat 在第一个无效时停止字符，而 Number(zoom) 或 +zoom 在这种情况下会导致 NaN。不过，看看您的代码，您可能需要一个专门分支来处理这种情况，因为数学会有所不同。)

zoom - 0.1 起作用的原因是 - 与 + 不同，它不会重载；它只有数字含义。因此，它隐式地将其参数强制为数字，而如果任一操作数是字符串，则 + 不会。