[英]Javascript: Adding style to div on button click
function showwLess() {
button.style.display="block";
idTab5.style="height:250px;overflow:hidden;font-size:14px;line-height:20px;";
button2.style.display="none";
}
That is the code for my button, idTab5
is the div to be styled, I was wondering if there was a better way to apply the style to the div than 这就是我按钮的代码,
idTab5
是要设置样式的div,我想知道是否有比将样式应用于div更好的方法
idTab5.style="
EDIT: 编辑:
got this.. 收到..
<script>
var button2 = document.getElementById("button2");
var button = document.getElementById("button");
var idTab5 = document.getElementById("idTab5");
function showwMore() {
$("#button").hide();
$("#idTab5").css({height: "250px",
overflow: "hidden",
font-size: "14px",
line-height: "20px;"});
$("#button2").show();
}
function showwLess() {
$("#button").show();
$("#idTab5").css({height: "250px",
overflow: "hidden",
font-size: "14px",
line-height: "20px;"});
$("#button2").hide();
}
</script>
and 和
{if $product->description|count_characters:true > 350 } {* full description *} {如果$ product-> description | count_characters:true> 350} {*完整说明*}
<div id="idTab5" style="overflow:hidden;height:250px;font-size:14px;line-height:20px;">{$product->description}</div>
<input id="button" type="button" style="margin-top:5px;font-size:12px;line-height:16px;color:white; width:120px;background:#4e3248;border:none;height:30px;border-radius:5px;" value="Mostrar +" onclick="showwMore()">
<input id="button2" type="button" style="margin-top:5px;display:none;font-size:12px;line-height:16px;color:white; width:120px;background:#4e3248;border:none;height:30px;border-radius:5px;" value="Mostrar -" onclick="showwLess()">
{else}
<div id="idTab5" style="overflow:hidden;height:250px;font-size:14px;line-height:20px;line-height:16px;">{$product->description}</div>
{/if}
There is, use jquery like this: 有,使用像这样的jquery:
$("#idTab").css({
height: 250,
overflow: "hidden",
//and so on...
});
Use jquery . 使用jquery 。 If your elements have id's:
如果您的元素具有ID:
function showwLess() {
$("#button").show();
$("#idTab5").css({height: "250px",
overflow: "hidden",
font-size: "14px",
line-height: "20px;"});
$("#button2").hide();
}
It's really very easy to get used to it, if you want a starting point I highly recommend CodeSchool . 习惯它真的很容易,如果您想要一个起点,我强烈建议您使用CodeSchool 。
EDIT 编辑
Add this to your html to include the jquery library. 将此添加到您的html以包括jquery库。 I still recommend you check my links:
我仍然建议您检查我的链接:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.