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}

现在它对我来说似乎没问题，但是onclick，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;";

Answer 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

Javascript：点击按钮更改Div大小

2 个答案: