Javascript：单击按钮时更改 Div 大小答案

【问题标题】：Javascript: Change Div size on button clickJavascript：单击按钮时更改 Div 大小
【发布时间】：2014-03-01 05:12:54
【问题描述】：

<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}

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

【问题讨论】：

标签： javascript php html css

【解决方案1】：

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

应该是

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;";

【讨论】：

你一定是在开玩笑，一开始我的代码正在工作，突然它停止工作..现在改变你的建议再次工作......天哪，非常感谢。
你知道如何实现一点 css 动画，这样 div 就不会那么快变大吗？
它stackoverflow.com/questions/15768242/… 为您提供了一些背景信息。
谢谢。打扰了

【解决方案2】：

HTML：

<div id="idTab5"  style="height:250px;font-size:12px;line-height:14px; border:1px solid black;"></div>
        <input id="button" type="button" style="margin-top:5px;font-size:12px;color:black; width:120px;background:#4e3248;border:none;height:30px;border-radius:5px;" value="Mostrar +" onclick="showwMore()"> 
        <input id="button2" type="button" style="display:none;margin-top:5px;display:block;font-size:12px;color:white; width:120px;background:#4e3248;border:none;height:30px;border-radius:5px;" value="Mostrar -" onclick="showwLess()">

JAVASCRIPT：

var button = document.getElementById("button");
var idTab5 = document.getElementById("idTab5");
var button2 = document.getElementById("button2");

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

}

function showwLess() {
    button2.style.display="none";
    idTab5.style="height:250px;font-size:12px;line-height:14px; border:1px solid black;";
    button.style.display="block";
}

见FIDDLE

【讨论】：

这不起作用，你不能像以前那样使用多种样式。 idTab5.style="height:250px;font-size:12px;