为了账号安全,请及时绑定邮箱和手机立即绑定

使用JS函数更改更少的CSS值

使用JS函数更改更少的CSS值

慕哥6287543 2022-09-02 10:29:04
我想用函数修改div的无单位缩放值。我知道我可以用一堆其他的if语句来做到这一点,但我想要很多缩放级别,所以我宁愿让函数看起来如果div处于完全缩放状态,如果不是,那么缩放值加倍。使用下面的函数,我试图从当前缩放值设置一个变量,将其更改为整数,如果整数为8,则保持缩放为8,如果整数是其他任何东西,则将该数字加倍,然后转换回字符串并设置为缩放值。<script>    function zoomIn() {      var zoomNow = (document.getElementById('mainVP').style.zoom);      zoomNow = Number(zoomNow);      if (zoomNow == 8) {        document.getElementById('mainVP').style.zoom = 8;      } else {        zoomNow = zoomNow*2;        toString(zoomNow);        document.getElementById('mainVP').style.zoom = zoomNow;      }}</script>
查看完整描述

2 回答

?
森林海

TA贡献2011条经验 获得超2个赞

这应该给你你正在寻找的东西:


function zoomIn(el)

{

  // Current zoom level as a number

  const zLevel = +(el.style.zoom);

  // If current zoom level is equal or grater than 8 then set it to 8

  // otherwise double it

  el.style.zoom = (zLevel >= 8) ? 8 : (zLevel * 2);

}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator


查看该链接以了解有关“?(三元)“运算符。


你可以这样使用它:


<!-- inline -->

<button id="zoomIn" onclick="zoomIn(this)">Zoom In</button>


// Zoomable element

const zoomable = document.getElementById('mainVP');

// Zoom button: this can be the zoomable element itself or any other element

document.getElementById('zoomIn').onclick = e => {

  zoomIn(zoomable);

};


查看完整回答
反对 回复 2022-09-02
?
有只小跳蛙

TA贡献1824条经验 获得超8个赞

NASA的答案似乎比我最终的解决方案要简洁得多,我现在知道了三元算子。但我只是不知道如何使用代码的“可缩放元素”或“缩放按钮”部分。一旦我知识多一点,我会重新审视这一点。我现在回到了我原来的技术,经过一些调试后,我意识到getElementById返回0。所以我用getComputedStyle代替了:


  function zoomIn() {

    var elem = document.getElementById("mainVP"); 

      var zoomNow = 

          window.getComputedStyle( 

              elem, null).getPropertyValue("zoom");

    if (zoomNow == 8) {

      document.getElementById('mainVP').style.zoom = 8;

    } else {

      zoomNow = zoomNow*2;

      document.getElementById('mainVP').style.zoom = zoomNow;

    }

}


查看完整回答
反对 回复 2022-09-02
  • 2 回答
  • 0 关注
  • 73 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信