【问题标题】: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 值从 -80px0px 并且当 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 函数调用它到一个按钮中,像这样:&lt;button onClick="MoveDiv()"&gt;Click me&lt;/button&gt;

      【讨论】:

        【解决方案3】:

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

        HTML

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

        JS

          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>
            

            【讨论】:

              猜你喜欢
              • 2018-09-23
              • 1970-01-01
              • 1970-01-01
              • 2012-03-15
              • 1970-01-01
              • 2018-04-03
              • 2020-10-18
              • 2019-08-31
              • 2014-04-04
              相关资源
              最近更新 更多