的Button改變CSS元素

Question

所以我有這個按鈕：

<button type="button" class="close" data-dismiss="modal">Close</button> 

，我有這樣的CSS屬性：

.rouletteWheelGradient{ 
margin-top: 52; 
} 

這有可能改變52px到62px當按下按鈕？

Answer 1

不適用於原始CSS，但這對JavaScript來說當然是可行的。首先，我們需要點擊功能添加到HTML觸發JavaScript的：

<button type="button" class="close" onclick="move()" data-dismiss="modal">Close</button> 

然後，我們需要建立一個移動.rouletteWheelGradient一個功能：在的結束

function move() { 
    for (var i = 0; i < document.getElementsByClassName("rouletteWheelGradient").length; i++) { 
    document.getElementsByClassName("rouletteWheelGradient")[i].style.marginTop = "62px"; 
    } 
} 

注意px函數，它表示像素。您需要爲您的選擇器指定一個度量單位，並且您在CSS中缺少這一點。

這裏的一個工作示例：

function move() { 
 
    for (var i = 0; i < document.getElementsByClassName("rouletteWheelGradient").length; i++) { 
 
     document.getElementsByClassName("rouletteWheelGradient")[i].style.marginTop = "62px" 
 
    } 
 
}

<button type="button" class="close" onclick="move()" data-dismiss="modal">Close</button> 
 
<div id="1" class="rouletteWheelGradient">One</div> 
 
<div id="2" class="rouletteWheelGradient">Two</div> 
 
<div id="3" class="rouletteWheelGradient">Three</div>

將上述樣品給出與rouletteWheelGradient類62px的頂緣每元件按鈕被點擊時。

我也創建了一個展示此here的JSFiddle。

希望這會有所幫助！ :)

Answer 2

是的，有一點點的JQuery：

$('button.close').click(function(e){ 
    e.preventDefault(); 
    $('.rouletteWheelGradient').css({'margin-top':'62px'}); 
}); 

https://jsfiddle.net/wrunnvqa/2/

Answer 3

是的，你可以用一些常規的JavaScript做到這一點。

只需添加一個id和onclick屬性爲您的按鈕標籤，像這樣

<button id="btn" onclick="change()" type="button" class="close" data-dismiss="modal">Close</button>

然後某處在頁面上添加一個腳本標記

<script> function change(){ document.getElementById("btn").style.marginTop= '62px'; } </script>

內部功能