如何在JavaScript中将zoom CSS属性作为函数实现？

我想在JavaScript中为

zoom

css属性实现一个函数；比如它是如何在Mac OS或Windows上的Chrome中实现的。这是因为这是一个非标准属性，它的实现可能因浏览器而异（Mozilla Firefox不支持它）。我不想使用

transform:scale（）

属性，因为它不会更改DOM中元素的实际大小（不像

zoom

）

我不知道我将如何继续这样做。对于我的例子，我有一个带有占位符文本和背景图像的输入，我想将其缩放到1.1

下面的代码只是显示我的案例在缩放和缩放方面的差异的一种方式：

const searchbar=document.getElementById（“searchbar-1”）
常量缩放=（元素，值）=>{
}
缩放（搜索栏，1.1）

.searchbar{
背景图像：url（“https://static.thenounproject.com/png/3134345-200.png");
背景重复：无重复；
背景尺寸：1.2vw汽车；
背景位置：1.7vw中心；
字体大小：1.2vw；
框大小：边框框；
填料：1.5vw 0vw 1.5vw 4vw；
边界：无；
边界半径：4px；
盒影：0vw 0.2928257666764276VW 1.464128843382138VW rgba（32,32,32,0.16）；
宽度：150px；
高度：自动；
}
#搜索栏-1：悬停{
缩放：1.1；/*环绕div边框随缩放而更改*/
}
#搜索栏-2：悬停{
变换：缩放（1.1）；/*环绕div边框不会随缩放而更改*/
}
div{
边框：1px纯红；
保证金：0px 0px 50px 0px；
}

---

您只需使用

style.setProperty（string，string）

。第一个参数是CSS属性，第二个参数是CSS值。它们都需要是

字符串

，才能工作

const searchbar = document.getElementById("searchbar-1")

const zoom = (element, value) => {
  element.style.setProperty('zoom', value);
}

zoom(searchbar, '1.1')

---

我希望它能帮助你！快乐编码

不，我不想使用现有的缩放方式（通过设置其属性）。我想创建自己的元素缩放函数。如果我像您那样做，zoom属性在不同浏览器中会有所不同，Mozilla Firefox不支持它。请使用

transform:scale（）

使大多数浏览器都支持它，并使用自定义变量通过javascript访问它easily@Jacnial如果答案对你有帮助，哪怕只是一点点，“请投我一票，我将不胜感激。”格林尼克斯。嗯，我已经知道怎么做了，但肯定知道。谢谢你@jacinal。你的一票对我来说意义重大。谢谢你的认可。