Question

对于课堂作业，我需要根据我点击的相应单选按钮来定位正方形的图像，无论是左，右还是中心。

我希望尽可能多地保留JavaScript的样式。然而，这证明是一个问题，因为我无法访问我想要的内容。例如：

这是单选按钮之一：

<input type="radio" id="center" name="position" onclick=moveShape() value="center">center

形状本身：

<span id="square">
</span>

它的JavaScript：

function moveShape() {
    var center = document.getElementById("center");
    var shape = document.getElementById("square");
    if(center.checked){
        // access CSS here

    }

然后我想访问样式，例如：

        #somenewid {
        width: 10px;
        height: 10px;
        background-color: red;
        display: inline-block;
       // code to center it

    }

我尝试过设置新ID。例如shape.id = "cent";可以使用一次，但如果我再单击另一个单选按钮并返回到中心按钮，它会告诉我ID是空的。

我没有，也不能给出作业的答案，但我确实需要知道如何设置我的HTML / JavaScript元素，以便我能够访问CSS样式。

Answer 1

不确定你想要什么＆＃34; center＆＃34;形状相对于，但这应该让你开始：

＆＃13;

function moveShape(cb) {

  let square = document.getElementById('square');
  if (cb.checked) {
    square.className = "center";
  } else {
    square.className = "right";
  }
}

＆＃13;

#square {
  width: 10px;
  height: 10px;
  background-color: red;
  display: inline-block;
  position: absolute;
}

.center {
  left: 50%;
  margin-left: -5px;
}

.right {
  right: 0;
  margin: auto;
}

.container {
  position: relative;
  border: 1px solid black;
  height: 10px;
}

＆＃13;

<label>
<input type="checkbox" onChange="moveShape(this)"> center
</label>

<div class="container">
  <span id="square" class="right"></span>
</div>

＆＃13;

Answer 2

您尝试重新发明的是class attribute/selector。

您可以根据需要添加/删除此属性，并添加其中的多个属性，以便您更动态地分配不同的样式规则。

在下面的示例中，我将使用容器text-align属性来设置形状的对齐方式，因此我将该类添加到此容器元素中。

// we will add the event listeners to all the input elements
document.querySelectorAll('input').forEach(function(inp) {
  inp.addEventListener('change', moveShape);
});

function moveShape(evt) {
  var container = document.getElementById("container");
  var pos = this.value;
  // first we remove the previous classes
  container.classList.remove('left', 'center', 'right');
  // then we add the new one
  container.classList.add(pos);
}

#container {
  width: 200px;
  height: 40px;
  border: 1px solid;
}

#square {
  width: 10px;
  height: 10px;
  background-color: red;
  display: inline-block;
  margin: 15px auto;
}

#container.center {
  text-align: center;
}

#container.left {
  text-align: left;
}

#container.right {
  text-align: right;
}

<input type="radio" id="left" name="position" value="left" name="shape-pos" checked><label for="left">left</label>
<input type="radio" id="center" name="position" value="center" name="shape-pos"><label for="center">center</label>
<input type="radio" id="right" name="position" value="right" name="shape-pos"><label for="right">right</label>

<div id="container">
  <span id="square">
</span>
</div>

但是由于input:checked pseudo-class：

，所有这些都可以在没有js的情况下完成

#container {
  width: 200px;
  height: 40px;
  border: 1px solid;
}

#square {
  width: 10px;
  height: 10px;
  background-color: red;
  display: inline-block;
  margin: 15px auto;
}

#left:checked ~ #container {
  text-align: left;
}

#center:checked ~ #container {
  text-align: center;
}

#right:checked ~ #container {
  text-align: right;
}

<input type="radio" id="left" name="position" value="left" name="shape-pos" checked><label for="left">left</label>
<input type="radio" id="center" name="position" value="center" name="shape-pos"><label for="center">center</label>
<input type="radio" id="right" name="position" value="right" name="shape-pos"><label for="right">right</label>

<div id="container">
  <span id="square">
</span>
</div>

选中复选框时，使用JavaScript访问CSS样式

2 个答案: