Question

可以使用transform: scale(sx)缩放元素，其中sx是（无单位）缩放因子。是否有某种方法可以将元素按比例缩小一定数量的像素（不知道其宽度）。

修改

我想在按下按钮时将不同大小的元素（例如按钮）的大小减小。但是，在所有按钮上应用相同的比例因子，例如scale(.95)会导致较大（较小）的按钮缩放得过多（很小）。因此，我想做的是在绝对按下时调整所有元素的大小，即按一定数量的像素或em左右。

Answer 1

这是如何使用 vanilla JavaScript 缩放宽度

const reduction=10;//in pixels
let button = document.querySelector("#myButton");
button.addEventListener("click",(event)=>{
  let style=window.getComputedStyle(button);
  let realWidth=parseInt(style.width);
  console.log(realWidth);
  let newWidth=realWidth-reduction;//some redundancy here
  button.style.width=`${newWidth}px`;//this changes the actual width property. With jQuery it would be even easier.
},false);

#myButton{
width:300px;
height:50px;
}

<button id="myButton">Click here to resize</button>

如何使用CSS缩放像素中的元素？

1 个答案: