我不知道如何撰寫一個簡單的事件偵聽器來在每次單擊按鈕時洗掉 5% od 元素寬度。從 100% 到 0%。
substracktBtn.addEventListener('click', function(){
container.style.width = "calc(" container.style.width " - 5%)";
})
在這段代碼中，我沒有出錯，但點擊后 div 的寬度仍然是 100%。
uj5u.com熱心網友回復：
怎么樣：
substracktBtn.addEventListener('click', function(){
container.style.width = container.style.width * 0.95
});
注意：未經測驗，不確定 JS 是否需要在末尾添加“px”，但您已了解要點。
uj5u.com熱心網友回復：
這是您的解決方案：
- 每次都會移除 5% 的起始寬度，直到達到 0%。使用另一種解決方案，您永遠不會達到 0%，因為您總是采用當前寬度的 5%。
const container = document.querySelector('div')
const button = document.querySelector('button')
const subtractPerClick = container.offsetWidth * 0.05
button.addEventListener('click', () => {
if (container.offsetWidth > 0)
container.style.width = container.offsetWidth - subtractPerClick 'px'
})div {
height: 100px;
width: 300px;
background-color: darkblue;
}<div></div>
<button>Substract</button>uj5u.com熱心網友回復：
- 使用
offsetWidth或clientWidth代替container.style.width（可能只是一個空字串） px使用 CSS 時添加缺少的單元calc
const EL_btn = document.querySelector("#btn");
const EL_container = document.querySelector("#container");
EL_btn.addEventListener("click", () => {
EL_container.style.width = `calc(${EL_container.offsetWidth}px - 5%)`
});#container {
background: gold;
}<button id="btn" type="button">CLICK ME</button>
<div id="container">Container</div>對于回應式時代，我的建議是始終為%單位設定寬度：
const EL_btn = document.querySelector("#btn");
const EL_container = document.querySelector("#container");
EL_btn.addEventListener("click", () => {
if (!("_w" in EL_container)) EL_container._w = 100;
EL_container._w = Math.max(0, EL_container._w - 5);
EL_container.style.width = `${EL_container._w}%`;
});#container {
background: gold;
}<button id="btn" type="button">CLICK ME</button>
<div id="container">Container</div>uj5u.com熱心網友回復：
用于移除當前寬度的 5%。這收斂！
const container = document.getElementById('container');
const button = document.getElementById('button');
button.addEventListener('click', () => {
container.style.width = container.offsetWidth * 0.95 'px'
})#container {
background-color: red;
width: 200px;
height: 100px;
}<div id="container"></div>
<button id="button">Substract</button>用于去除起始寬度的 5%
const container = document.getElementById('container');
const button = document.getElementById('button');
let startWidth5Percent = container.offsetWidth * 0.05;
button.addEventListener('click', () => {
container.style.width = container.offsetWidth - startWidth5Percent 'px';
})#container {
background-color: red;
width: 200px;
height: 100px;
}<div id="container"></div>
<button id="button">Substract</button>uj5u.com熱心網友回復：
如果您指的是原始寬度，則需要先將其保存到變數中：
var container = document.getElementById("container")
var button = document.getElementById("button")
var containerOriginalWidth = container.clientWidth
var containerRatio = 1
button.addEventListener("click", function() {
containerRatio = containerRatio - 0.05
container.style.width = (containerOriginalWidth * containerRatio) 'px'
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/376383.html
標籤：javascript 添加事件监听器 计算
上一篇：可選組的正則運算式長度檢查帳戶
下一篇：只向DOM添加新的陣列元素