如何动态设置Javascriptstyle.tranform="scale"

Question

我在 html 主体的脚本中声明了一个变量 var scale=0.8，当我调整美人鱼制作的图形大小时，我会相应地更新比例，例如

<script>
var scale=0.8;
DeployGraph(); 

function toggleZoomScreen(mode){
if (mode == 1){
 scale+=0.1;
//  document.body.style.zoom=scale.toString()+"%";
}
else if (mode == 2){
scale-=0.1;
//  document.body.style.zoom=scale.toString()+"%";
}
var mer = document.getElementById("mermaid");
mer.style.transform= "scale("+scale+","+scale+")";
} 
</script>

我想以某种方式保留变量的值，以便每次刷新时都会调用 DeployGraph，并以相同的比例值调整图形的大小。 DeployGraph 在 html 的头部声明，而不是主体。这能做到吗？

我尝试在头部创建一个不同的变量并在每次比例值变化时更新它，然后在我使用的 DeployGraph 中 element.style.transform= "scale("+scale+","+scale+")"; 其中元素 = document.getElementById("美人鱼"); 但是，该值始终是默认值。

Answer 1

您不能跨页面刷新保留变量。

您需要做的是在浏览器中存储您需要的值，并在页面加载后检查它。

您可以使用 URL search parameters, cookies or local storage 执行此操作。

使用本地存储时，您可以执行以下操作：

// On document load, after initialising the scale variable
scale = window.localStorage.getItem('scale') || 0.8; // add || 0.8 in case value is undefined

// In toggleZoomScreen
function toggleZoomScreen(mode){
  if (mode == 1){
    scale+=0.1;
  }
  else if (mode == 2){
    scale-=0.1;
  }

  // Update the value in local storage
  window.localStorage.setItem('scale', scale);

  var mer = document.getElementById("mermaid");
  mer.style.transform= "scale("+scale+","+scale+")";
}

如何动态设置Javascriptstyle.tranform="scale"

How to set Javascript style.tranform="scale" dynamically

javascript

transform

mermaid