如何在选中单选按钮时将元素的位置更改为左侧？

Question

我想在选中单选按钮时将元素的位置更改为左边。但此代码无效。

if(document.getElementById("red").checked){
document.querySelector(".sliding-content").style.left = "-100%";
}

Answer 1

使用JQuery，您可以根据单击单选按钮移动元素。

＆＃13;

＆＃13;

$("#redRadio").click(function() {
  $('#test').css('margin-left', '100px');
});

＆＃13;

#test {
  height: 100px;
  width: 100px;
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <input id="redRadio" type="radio" name="color" value="red">Red<br>
</form>

<div id="test"></div>

＆＃13;

＆＃13;

＆＃13;

根据要求，纯JS：

＆＃13;

＆＃13;

function moveRed() {
  document.getElementById("test").style.marginLeft = "100px";
}

＆＃13;

#test {
  height: 100px;
  width: 100px;
  background-color: red;
}

＆＃13;

<form action="">
  <input onclick="moveRed()" id="redRadio" type="radio" name="color" value="red">Red<br>
</form>

<div id="test"></div>

＆＃13;

＆＃13;

＆＃13;