我有這段 css，但我想用 javascript 中的變數更改關鍵幀中的寬度。我怎樣才能做到這一點？
@keyframes test {
100% {
width: 100%;
}
}
uj5u.com熱心網友回復：
它必須是關鍵幀影片嗎？通常，您會transition為這種由 JavaScript 提供支持的影片使用 CSS屬性，如下所示：
var width = 50;
document.getElementById('button').addEventListener('click', () => {
width = width 50;
document.getElementById('box').style.width = width 'px';
});#box {
background: red;
height: 50px;
width: 50px;
transition: width .5s;
margin-bottom: 1em;
}<div id="box"></div>
<button id="button">Change Width</button>uj5u.com熱心網友回復：
如果您有更通用的影片（不能僅通過過渡來實作），那么您可以使用 JS 來設定 CSS 變數。
以問題中的示例為例，將 100% 替換為變數：
@keyframes test {
100% {
width: var(--bg);
}
}
和 Javascript 你會有類似的東西：
thediv.style.setProperty('--bg', '60px');
uj5u.com熱心網友回復：
@JohnUleis 已經正確回答了。我來得太晚了。但我只是為了好玩添加一個解決方案。被命名：Rom有多遠？;-)
干杯
let root = document.documentElement;
const div = document.querySelector('div');
root.addEventListener("mousemove", e => {
div.style.setProperty('--width', e.clientX "px");
div.innerHTML = e.clientX ' km';
});:root {
--width: 100%;
}
div {
background: hotpink;
width: var(--width);
text-align: center;
color: white;
}<div>how far is rom?</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/384460.html
標籤：javascript html css