A Button Changing A CSS Element

So I have this button: and I have this CSS attribute: .rouletteWheelGradient{ margin-top: 52;

Solution 1:

Not with raw CSS, but this is certainly possible with JavaScript. First, we need to add a click function to the HTML to trigger the JavaScript:

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

Then we need to build a function that moves .rouletteWheelGradient:

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

Note the px at the end of the function, which represents pixels. You need to specify a unit of measurement for your selector, and you're missing this in your CSS.

Here's a working example:

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>

The above sample gives every element with class rouletteWheelGradient a top margin of 62px when the button is clicked.

I've also created a JSFiddle showcasing this here.

Hope this helps! :)

Solution 2:

Yes, with a little JQuery:

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

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

Solution 3:

Yes, you can do it with some regular JavaScript.

Just add an id and onclick attribute to your button tag like so

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

then somewhere on the page you add a function inside a script tag

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