时间戳

首页 > 解决方案 > 如何在 JavaScript 中将缩放 CSS 属性实现为函数？

javascript - 如何在 JavaScript 中将缩放 CSS 属性实现为函数？

问题描述

我想zoom在 JavaScript 中为 css 属性实现一个函数；就像它是如何在 Mac OS 或 Windows 上的 Chrome 中实现的一样。这是因为这是一个非标准属性，并且它的实现可能因浏览器而异（Mozilla Firefox 不支持它）。我不想使用该transform: scale()属性，因为它不会更改 DOM 中元素的实际大小（与 like 不同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>

标签： javascriptcss

解决方案

你可以只使用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')

推荐阅读