如何使用 javascript 通过按钮 onclick 事件更改 div HTML 标记答案

【问题标题】：How can I change div HTML tag via button onclick event using javascript如何使用 javascript 通过按钮 onclick 事件更改 div HTML 标记
【发布时间】：2017-11-06 09:52:59
【问题描述】：

<nav class="navbar navbar-default" style="...">
    <div class="container" id="main_container" style="margin-top: -80px">
        <div>
            <div class="row">
                <div class="col-xs-0 col-md-2" style="background-color: #f8f8f8;text-align: center;"><a href="http://cve.circl.lu/api/cve/{{ id6 }}" target="_blank">{{ id6 }}</a></div>
                <div class="col-xs-0 col-md-1" style="background-color: #f5f4f5;text-align: center;">{{ rating6 }}</div>
                <div class="col-xs-0 col-md-6" style="background-color: #F8F8F8"><marquee scrollamount="4">{{ description6 }}</marquee></div>
                <div class="col-xs-0 col-md-3" style="background-color: #f5f4f5;text-align: center;">{{ date6 }}</div>
            </div>
            <div class="row">
                <div class="col-xs-0 col-md-2" style="background-color: #f8f8f8;text-align: center;"><a href="http://cve.circl.lu/api/cve/{{ id7 }}" target="_blank">{{ id7 }}</a></div>
                <div class="col-xs-0 col-md-1" style="background-color: #f5f4f5;text-align: center;">{{ rating7 }}</div>
                <div class="col-xs-0 col-md-6" style="background-color: #F8F8F8"><marquee scrollamount="4">{{ description7 }}</marquee></div>
                <div class="col-xs-0 col-md-3" style="background-color: #f5f4f5;text-align: center;">{{ date7 }}</div>
            </div>
            <div class="row" style="margin-top: 5px">
                <div class="col-xs-0 col-md-5">
                </div>
                <div class="col-xs-0 col-md-2" align="center">
                    <button class="btn btn-xs btn-default" type="button" id="my_button">History</button>
                </div>
                <div class="col-xs-0 col-md-5"></div>
            </div>
            <div class="row" style="margin-top: 5px">
                <div class="col-xs-0 col-md-2" style="background-color: #f8f8f8;text-align: center;"><a href="http://cve.circl.lu/api/cve/{{ id8 }}" target="_blank">{{ id8 }}</a></div>
                <div class="col-xs-0 col-md-1" style="background-color: #f5f4f5;text-align: center;">{{ rating8 }}</div>
                <div class="col-xs-0 col-md-6" style="background-color: #F8F8F8"><marquee scrollamount="4">{{ description8 }}</marquee></div>
                <div class="col-xs-0 col-md-3" style="background-color: #f5f4f5;text-align: center;">{{ date8 }}</div>
            </div>
        </div>
    </div>
</nav>

我有一个简单的标题 HTML div 结构，带有按钮 id="my_button"。在按钮事件 onclick 上，第一个带有 id="main_container" 的 div 标签应该更改 css 指令，特别是 margin-top 值从 -80px 到 0px 并且当 margin-top 值等于 0px 时，它应该更改为 -80px。

我是网络开发的新手。我想我需要一个带有 OnClick 事件处理程序的 javascript 脚本函数。

【问题讨论】：

标签： javascript html

【解决方案1】：

使用下面的函数通过javascript更改margin-top

<script type="text/javascript">
$(function() {
    $('#my_button').click(function() {
         var margin = $('#main_container').css('margin-top');
         var newMargin = (margin=='-80px')?'0px':'-80px';
         $('#main_container').css('margin-top',newMargin);
    });
});
</script>

【讨论】：

【解决方案2】：

-您应该使用 style="margin:xxx%" 将边距添加到 div 中

您可以使用此 javascript 代码使其在单击按钮时更改：

function MoveDiv() {
    var e = document.getElementById("YOUR_DIV_id");
    if (e.style.marginTop == '-80px')
    {
        e.style.marginTop = "0px";
    }
    else 
    {
        e.style.marginTop = "-80px";
    }
}

然后你可以简单地用一个 OnClick 函数调用它到一个按钮中，像这样：<button onClick="MoveDiv()">Click me</button>

【讨论】：

【解决方案3】：

在按钮单击时调用 Javascript 函数并验证 marginTop 值。

HTML

  <button class="btn btn-xs btn-default" type="button" id="my_button" onclick="test()">History</button>

  function test() {
    var marginValue = document.getElementById('main_container').style.marginTop;
    if(marginValue == "-80px") {
      document.getElementById('main_container').style.marginTop = "0px";
    } else {
      document.getElementById('main_container').style.marginTop = "-80px";
    }
   }

DEMO

【讨论】：

【解决方案4】：

var button = document.querySelector("#my_button");
var container = document.querySelector("#main_container");

button.addEventListener("click", function () {
  container.style.marginTop = "0px"
})

<nav class="navbar navbar-default" style="...">
    <div class="container" id="main_container" style="margin-top: -80px">
        <div>
            <div class="row">
                <div class="col-xs-0 col-md-2" style="background-color: #f8f8f8;text-align: center;"><a href="http://cve.circl.lu/api/cve/{{ id6 }}" target="_blank">{{ id6 }}</a></div>
                <div class="col-xs-0 col-md-1" style="background-color: #f5f4f5;text-align: center;">{{ rating6 }}</div>
                <div class="col-xs-0 col-md-6" style="background-color: #F8F8F8"><marquee scrollamount="4">{{ description6 }}</marquee></div>
                <div class="col-xs-0 col-md-3" style="background-color: #f5f4f5;text-align: center;">{{ date6 }}</div>
            </div>
            <div class="row">
                <div class="col-xs-0 col-md-2" style="background-color: #f8f8f8;text-align: center;"><a href="http://cve.circl.lu/api/cve/{{ id7 }}" target="_blank">{{ id7 }}</a></div>
                <div class="col-xs-0 col-md-1" style="background-color: #f5f4f5;text-align: center;">{{ rating7 }}</div>
                <div class="col-xs-0 col-md-6" style="background-color: #F8F8F8"><marquee scrollamount="4">{{ description7 }}</marquee></div>
                <div class="col-xs-0 col-md-3" style="background-color: #f5f4f5;text-align: center;">{{ date7 }}</div>
            </div>
            <div class="row" style="margin-top: 5px">
                <div class="col-xs-0 col-md-5">
                </div>
                <div class="col-xs-0 col-md-2" align="center">
                    <button class="btn btn-xs btn-default" type="button" id="my_button">History</button>
                </div>
                <div class="col-xs-0 col-md-5"></div>
            </div>
            <div class="row" style="margin-top: 5px">
                <div class="col-xs-0 col-md-2" style="background-color: #f8f8f8;text-align: center;"><a href="http://cve.circl.lu/api/cve/{{ id8 }}" target="_blank">{{ id8 }}</a></div>
                <div class="col-xs-0 col-md-1" style="background-color: #f5f4f5;text-align: center;">{{ rating8 }}</div>
                <div class="col-xs-0 col-md-6" style="background-color: #F8F8F8"><marquee scrollamount="4">{{ description8 }}</marquee></div>
                <div class="col-xs-0 col-md-3" style="background-color: #f5f4f5;text-align: center;">{{ date8 }}</div>
            </div>
        </div>
    </div>
</nav>

但我建议使用transform 以获得更好的性能。例如：

之前：transform: translateY(-80px)。之后：transform: translateY(0)。

【讨论】：

【解决方案5】：

请尝试以下代码，我删除了您的内联样式并添加了 css 类：

<style>
#main_container { margin-top:0;}
#main_container.margin_top { margin-top:-80px;}
</style>

<nav class="navbar navbar-default" style="...">
<div class="container" id="main_container">
    <div>
        <div class="row">
            <div class="col-xs-0 col-md-2" style="background-color: #f8f8f8;text-align: center;"><a href="http://cve.circl.lu/api/cve/{{ id6 }}" target="_blank">{{ id6 }}</a></div>
            <div class="col-xs-0 col-md-1" style="background-color: #f5f4f5;text-align: center;">{{ rating6 }}</div>
            <div class="col-xs-0 col-md-6" style="background-color: #F8F8F8"><marquee scrollamount="4">{{ description6 }}</marquee></div>
            <div class="col-xs-0 col-md-3" style="background-color: #f5f4f5;text-align: center;">{{ date6 }}</div>
        </div>
        <div class="row">
            <div class="col-xs-0 col-md-2" style="background-color: #f8f8f8;text-align: center;"><a href="http://cve.circl.lu/api/cve/{{ id7 }}" target="_blank">{{ id7 }}</a></div>
            <div class="col-xs-0 col-md-1" style="background-color: #f5f4f5;text-align: center;">{{ rating7 }}</div>
            <div class="col-xs-0 col-md-6" style="background-color: #F8F8F8"><marquee scrollamount="4">{{ description7 }}</marquee></div>
            <div class="col-xs-0 col-md-3" style="background-color: #f5f4f5;text-align: center;">{{ date7 }}</div>
        </div>
        <div class="row" style="margin-top: 5px">
            <div class="col-xs-0 col-md-5">
            </div>
            <div class="col-xs-0 col-md-2" align="center">
                <button class="btn btn-xs btn-default" type="button" id="my_button">History</button>
            </div>
            <div class="col-xs-0 col-md-5"></div>
        </div>
        <div class="row" style="margin-top: 5px">
            <div class="col-xs-0 col-md-2" style="background-color: #f8f8f8;text-align: center;"><a href="http://cve.circl.lu/api/cve/{{ id8 }}" target="_blank">{{ id8 }}</a></div>
            <div class="col-xs-0 col-md-1" style="background-color: #f5f4f5;text-align: center;">{{ rating8 }}</div>
            <div class="col-xs-0 col-md-6" style="background-color: #F8F8F8"><marquee scrollamount="4">{{ description8 }}</marquee></div>
            <div class="col-xs-0 col-md-3" style="background-color: #f5f4f5;text-align: center;">{{ date8 }}</div>
        </div>
    </div>
</div>
</nav>

<script>
var button = document.getElementById('my_button');
var container = document.getElementById('main_container');
button.onclick = function(){
    container.classList.toggle("margin_top");
}
</script>

【讨论】：