如何使用 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>

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>

Answer 2

这应该会产生我认为您正在寻找的预期效果。 我摆脱了 if 语句，而是这样做了，所以每当单击按钮时，它会将左边距增加 1px。 更改宽度不起作用，因为这会更改段落块的大小，而不是 position。

 let button = document.querySelector("button"); let width = 0; button.onclick = function(){ width ++; var p = document.querySelector("p"); p.style = `margin-left:${width}px;`; };

 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>