[英]How can I change div HTML tag via button onclick event using javascript
<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
。
我是Web開發的新手。 我想我需要一個帶有OnClick
事件處理程序的javascript腳本功能。
使用以下功能通過使用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>
單擊按鈕時調用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";
}
}
-您應使用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>
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)
。
請嘗試以下代碼,我刪除了您的內聯樣式並添加了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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.