Javascript:单击按钮更改 Div 大小

Question

<script type="text/javascript">
var button = document.getElementById("button");
var idTab5 = document.getElementById("idTab5");
var button2 = document.getElementById("button2");

function showwMore() {
    button.style.display="none";
    idTab5.style="overflow:hidden;display:block;height:100%;font-size:12px;line-height:14px;";
        button2.style.display="block";

}

function showwLess() {
    button2.style.display="none";
    idTab5.style="overflow:hidden;height:250px;font-size:12px;line-height:14px;";
    button.style.display="block";
}
</script>

这是另一段代码:

{if $product->description|count_characters:true > 350 }
        {* full description *}
        <div id="idTab5"  style="overflow:hidden;height:250px;font-size:12px;line-height:14px;">{$product->description}</div>
        <input id="button" type="button" style="margin-top:5px;font-size:12px;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;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:12px;line-height:14px;">{$product->description}</div>
    {/if}

现在它对我来说似乎很好，但是点击时，div 没有增长，知道为什么会这样吗？我检查了代码很多次都找不到它为什么不起作用，我是不是漏掉了什么？？？

Answer 1

要通过 javascript 使用多种样式，您可以使用 setAttribute() 之类的

应该是

idTab5.setAttribute("style", "overflow:hidden;display:block;height:100%;font-size:12px;line-height:14px;");

或者

您可以使用 cssText 属性将 css 用作元素上的字符串

idTab5.style.cssText = "overflow:hidden;display:block;height:100%;font-size:40px;line-height:14px;";

代替

idTab5.style="overflow:hidden;display:block;height:100%;font-size:12px;line-height:14px;";