日安需要你们的帮助伙计们。有没有办法让一个按钮onclick在样式表中调整段落的宽度?基本上现在看起来是这样的:
onclick
p { width: 400px; }
我的目标是,按钮将改变它的宽度为100%,所以段落将采取窗口的大小。
iszxjhcz1#
我建议创建一个段落宽度为100%的css类。然后使用javascript(jquery或plain)在按钮单击时将css类添加到元素中。See this example
fullWidthParagraph = function() { $('p').toggleClass('full-width'); }
$('p')选择页面中的所有段落元素,toggleClass函数在元素上添加/删除full-width类。如果你不想让按钮在400 px和fullwidth之间来回切换,你可以使用addClass。
$('p')
toggleClass
full-width
addClass
sigwle7e2#
(我设置了background-color:red,只有您才能看到更改)
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>
gkn4icbw3#
这将调整p元素onClick的width大小:
p
onClick
width
<button type="button" onClick = "document.getElementById('text').style.width = '100%';">BUTTON TEXT</button> <p id="text" style="width: 400px;"></p>
3条答案
按热度按时间iszxjhcz1#
我建议创建一个段落宽度为100%的css类。
然后使用javascript(jquery或plain)在按钮单击时将css类添加到元素中。
See this example
$('p')
选择页面中的所有段落元素,toggleClass
函数在元素上添加/删除full-width
类。如果你不想让按钮在400 px和fullwidth之间来回切换,你可以使用addClass
。sigwle7e2#
(我设置了
background-color:red
,只有您才能看到更改)gkn4icbw3#
这将调整
p
元素onClick
的width
大小: