如何在JavaScript中实现缩放CSS属性作为一个函数？

Question

我想在JavaScript中为Chrome css属性实现一个函数；就像它在Mac或Windows上的Chrome中实现的那样。这是因为这是一个非标准属性，其实现可能因浏览器而异(Mozilla Firefox不支持它)。我不想使用transform: scale()属性，因为它不会改变DOM中元素的实际大小(与zoom不同)。

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

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

​

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

const zoom = (element, value) => {
  
}

zoom(searchbar, 1.1)

.searchbar {
  background-image: url("https://static.thenounproject.com/png/3134345-200.png");
  background-repeat: no-repeat;
  background-size: 1.2vw auto;
  background-position: 1.7vw center;
  font-size: 1.2vw;
  box-sizing: border-box;
  padding: 1.5vw 0vw 1.5vw 4vw;
  border: none;
  border-radius: 4px;
  box-shadow: 0vw 0.29282576866764276vw 1.4641288433382138vw rgba(32, 32, 32, 0.16);
  width: 150px;
  height: auto;
}

#searchbar-1:hover {
  zoom: 1.1; /* Wrapping div border changes with zoom */
}

#searchbar-2:hover {
  transform: scale(1.1); /* Wrapping div border does not change with scale */
}

div {
  border: 1px solid red;
  margin: 0px 0px 50px 0px;
}

<div><input placeholder="City" class="searchbar" id="searchbar-1" /></div>

<div><input placeholder="City" class="searchbar" id="searchbar-2" /></div>

​

Answer 1

您可以只使用style.setProperty(string, string)。第一个参数是CSS属性，第二个参数是CSS值。它们都需要是strings才能工作。

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

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

zoom(searchbar, '1.1')