如何在 JavaScript 中将 CSS 属性作为 function 实现？

Question

I want to implement a function for the zoom css property in JavaScript; like how it is implemented in Chrome on Mac OS or Windows. This is because this is a non-standard property and its implementation can vary across browsers (Mozilla Firefox does not support it). I do not want to use the transform: scale() property because it does not change the actual size of the element within the DOM (unlike like zoom ).

I am not sure how I would go on about doing this. For my case, I have an input with placeholder text and background image which I want to zoom to 1.1.

The code below is just a way to show the difference in zoom and scale for my case:

 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

You can just use style.setProperty(string, string) . The first parameter is the CSS atttribute and the second parameter is the CSS value . Both of them need to be strings in order to work.

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

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

zoom(searchbar, '1.1')

I hope it helps you! Happy coding!