CSS要素

Question

を変更するボタンだから私は、このボタンを持っている：

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

を、私は、このCSS属性を持っている：

.rouletteWheelGradient{ 
margin-top: 52; 
} 

は、ボタンが押されたときに可能性が62pxに52pxを変更するということです？

Answer 1

生のCSSではなく、これはJavaScriptでも可能です。まず、我々はJavaScriptをトリガするためにHTMLにクリック機能を追加する必要があります。

<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でこれを見逃しています。上記のサンプルは、クラスrouletteWheelGradientを持つすべての要素ボタンがクリックされる62pxの上マージンを与え

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>

：

はここで働い例です。

私はまた、この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でそれを行うことができます。

ちょうどあなたがスクリプトタグ

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

内の機能を追加し、どこかのページにそのように

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

のようなあなたのbuttonタグにidとonclick属性を追加