单击按钮调整段落大小

Question

美好的一天，

需要你们的帮助。有没有办法让按钮 onclick 调整样式表中段落的宽度？现在基本上是这样的：

p { width: 400px; }

我的目标是，按钮会将其宽度更改为 100%，因此该段落将采用 window 的大小。

Answer 1

这将调整 p 元素的 width 的大小 onClick:

<button type="button" onClick = "document.getElementById('text').style.width = '100%';">BUTTON TEXT</button>
    <p id="text" style="width: 400px;"></p>

Answer 2

（我设置了background-color:red只有你能看到变化）

function changeP(){
 document.getElementById('p').style.width="100%";
}

p { width: 400px;
    background-color:red; }

<p id="p">Hello world</p>
<button onclick="changeP()">Try me</button>

Answer 3

我建议制作 css class 段落宽度为 100%。

然后使用 javascript（jquery，或普通）将 css class 添加到单击按钮时的元素。

See this example

fullWidthParagraph = function() {
  $('p').toggleClass('full-width');
 }

$('p')选择页面中的所有段落元素，toggleClass函数adds/removesfull-widthclass对元素。如果您不想让按钮在 400 像素和全宽之间来回切换，您可以使用 addClass。

单击按钮调整段落大小

Resize paragraph on button click

html

css

resize

paragraph