更改 CSS 元素的按钮 [重复]答案

【问题标题】：A Button changing a CSS Element [duplicate]更改 CSS 元素的按钮 [重复]
【发布时间】：2017-03-13 13:25:53
【问题描述】：

所以我有这个按钮：

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

我有这个 CSS 属性：

.rouletteWheelGradient{
margin-top: 52;
}

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

【问题讨论】：

标签： javascript css

【解决方案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。

希望这会有所帮助！ :)

【讨论】：

我建议您通过 id 而不是类名来执行此操作，因为您以后可能会将该类应用于多个对象。
这就是我一开始的想法，虽然名称为gradient，我假设可能有多个具有相同名称的类。我假设他们都想在轮盘赌轮的偏移量中立即更改。无论如何，您始终可以使用document.getElementsByClassName('.rouletteWheelGradient')[x] 定位单个元素，其中x 是该类的第n 个元素:)

【解决方案2】：

是的，用一点 JQuery：

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

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

【讨论】：

【解决方案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>

【讨论】：