javascript - 如何使用 Javascript 在每次点击时添加段落的宽度？

Question

我希望能够在每次点击 Javascript 时为我的段落添加宽度。我究竟做错了什么？这是我的代码：

let button = document.querySelector("button");

    button.addEventListener("click",function(e) {

    let p = document.querySelector("p");
    if(window.getComputedStyle(p).getPropertyValue("width")==="10px")
    {
        p.style.width = "10px";
        p++;
    }
    else 
    {
        console.log(false)
    }
});

p {
    box-shadow: 0 4px 8px rgb(0,0,0,0.4);
    height: 40px;
    width: 10px;
    display: block;
}

<button>click!</button>
<p>my paragraph</p>

标签： javascripthtmlcss

Answer 1

您的 if 条件是错误的，因为您想在width每次点击时更改。一旦您第一次单击，您width将20px不再满足条件。相反，您想检查 是否width具有特定值。

请注意，我正在检查var widthValue，因为我似乎无法检查p.style.width

var widthValue = 10;

document.querySelector("button").addEventListener("click", function() {
    var p = document.querySelector("p");

    if(widthValue < 100) {
        p.style.width = `${widthValue}px` ;
    }
    widthValue += 10;
});

p {
    box-shadow: 0 4px 8px rgb(0,0,0,0.4);
    height: 40px;
    width: 10px;
    display: block;
}

<button>click!</button>
<p>my paragraph</p>