在 JS 函数和 CSS 属性之间传递值

Question

var coef = 1;

function enlarge(value) { 
    coef = value;   }

document.getElementById('shadow').addEventListener('mouseover', enlarge(2) );
document.getElementById('shadow').addEventListener('mouseout', enlarge(1) );

.set('.img', {
 ...
  transformOrigin: '50% 50% '+(500 * coef)+'px',
 ...   
});

在这里你可以看到CSS属性

 transformOrigin: 

位于函数内部

.set(...)

。我无法更改函数 .set(...) 并以任何其他方式更改 CSS 属性，因为函数 .set(...) 更复杂，包含许多 CSS 属性。在这种形式下，函数运行良好。我只能添加一个coef .

意思很简单：

当‘鼠标悬停’时，系数 = 2。

当'鼠标移出'时，系数 = 1。

但是属性 transformOrigin: 没有收到更改。

帮我解决这么简单的问题，在我看来:)

我预料到了

.set('.img', {
 ...
  transformOrigin: '50% 50% 1000px',
 ...   
});

当“鼠标悬停”时。

Answer 1

我已经有一段时间没有使用javascript了，所以我可能是错的，但我认为你的问题可能是由于你想要更改的元素没有重新加载，因为css属性仅在页面第一次渲染时加载，你可以尝试在事件监听器函数中重新加载您想要更改的组件（或者您可以使用 location.reload() 重新加载整个页面，尽管重新加载页面上的所有内容并不理想），使用像 React 这样的框架进行状态管理可能会让您更轻松。

这个使用 React 的线程可能会有所帮助 https://stackoverflow.com/questions/56649094/how-to-reload-a-component-part-of-page-in-reactjs#:~:text=If%20you%20just %20想要%20to，每当%20data%20is%20更新时调用%20。&text=您%20can%20trigger%20a%20reload%20of%20components%20by%20updating%20the%20state。