Question

所以我有这个按钮：

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

我有这个CSS属性：

.rouletteWheelGradient{
margin-top: 52;
}

按下按钮时，是否可以将52px更改为62px？

Answer 1

不使用原始CSS，但使用JavaScript肯定是可行的。首先，我们需要在HTML中添加一个click函数来触发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中忽略这一点。

这是一个有效的例子：

＆＃13;

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

＆＃13;

<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>

＆＃13;

当点击按钮时，上面的示例为每个元素提供了类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>

一个改变CSS元素的按钮

3 个答案: