Question

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

这是我的按钮的代码，idTab5是要设置样式的div，我想知道是否有更好的方式将样式应用于div而不是

idTab5.style="

编辑：

得到了这个..

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

和

{if $ product-＆gt; description | count_characters：true＆gt; 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}

Answer 1

有，使用这样的jquery：

$("#idTab").css({
    height: 250,
    overflow: "hidden",
    //and so on...
});

Answer 2

使用jquery。如果你的元素有id：

function showwLess() {
    $("#button").show();
    $("#idTab5").css({height: "250px",
                   overflow: "hidden",
                   font-size: "14px",
                   line-height: "20px;"});
    $("#button2").hide();
}

习惯它真的很容易，如果你想要一个起点我强烈推荐CodeSchool。

修改

将此添加到您的html以包含jquery库。我仍然建议你查看我的链接：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Javascript：在按钮点击时为div添加样式

2 个答案: