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);
};
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;
}
}
添加回答
举报