单击按钮调整段落大小

Question

美好的一天，

需要您的帮助。有没有一种方法可以使按钮onclick在样式表中调整段落的宽度？现在基本上看起来像这样：

p { width: 400px; }

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

Answer 1

（我将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 2

这将调整width元素p的{​​{1}}的大小：

onClick

Answer 3

我建议您制作一个段落宽度为100％的CSS类。

然后使用javascript（jQuery或纯文本）将CSS类添加到按钮单击时的元素上。

See this example

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

$('p')选择页面中的所有段落元素，toggleClass函数在元素上添加/删除full-width类。如果您不希望按钮在400px和全角之间来回切换，则可以使用addClass。