当先锋百科网

首页 1 2 3 4 5 6 7

日安,

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

p { width: 400px; }

我的目标是,按钮将改变它的宽度为100%,所以段落将采取窗口的大小。

我建议创建一个段落宽度为100%的css类。

然后使用javascript (jquery或plain)将css类添加到按钮单击时的元素中。

看这个例子

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

$('p ')选择页面中的所有段落元素,toggleClass函数添加/移除元素上的全角类。如果不想让按钮在400像素和全宽之间来回切换,可以使用addClass。

(我设置了背景色:红色,只有你能看到变化)

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>

这将调整p元素的宽度onClick:

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