Question

在这段代码中，我有两个方框。目标是如果按下按钮，则其中一个框的宽度是原来的三倍，但高度必须保持不变。盒子的宽度变成原来的三倍，但高度变为。我使用document.getElementById("").style. = "";使用javascript完成此操作。问题是我无法使用高度，因为高度是css样式的“：before”。这不是我可以使用javascript更改的DOM元素。有人有主意吗？预先感谢。

代码：

<!DOCTYPE html>
<html>
<head>


<style>
#vierkant{
    width: calc(100%/6);
      float:left;
      display: flex; 
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

#vierkant-marges {
      flex: 1;
      border: solid 4px grey;
      border-radius: 10px;
      border-color:grey;
      margin:5%;
}

#vierkant-marges:hover {
      flex: 1;
      border: double 4px transparent;
      border-radius: 10px;
      background-image: linear-gradient(white, white), radial-gradient(circle at top right, #21d4fd, #b721ff);
      background-origin: border-box;
      background-clip: content-box, border-box;
      margin:5%;
}


#vierkant:before{
    content: "";
    display: block;
    padding-top: 100%;
    float:left;
}


#SecondVierkant{
    width: calc(100%/6);
      float:left;
      display: flex; 
}

#SecondVierkant-marges {
      flex: 1;
      border: solid 4px grey;
      border-radius: 10px;
      border-color:grey;
      margin:5%;
}

#SecondVierkant-marges:hover {
      flex: 1;
      border: double 4px transparent;
      border-radius: 10px;
      background-image: linear-gradient(white, white), radial-gradient(circle at top right, #21d4fd, #b721ff);
      background-origin: border-box;
      background-clip: content-box, border-box;
      margin:5%;
}


#SecondVierkant:before{
    content: "";
    display: block;
    padding-top: 100%;
    float:left;
}
</style>
</head>

<body>

<div id="vierkant">
  <div id="vierkant-marges">

  </div>
</div>

<div id="SecondVierkant">
  <div id="SecondVierkant-marges">

  </div>
</div>

<input type="button" value="click me to change the size of the box!" onclick="myFunction()" />
</body>

<script>

function myFunction(){
  document.getElementById("vierkant").style.width = "calc(100%/6*3)";
  document.getElementById("vierkant-marges").style.margin = "calc(5%/3)";

}

</script>
</html>

用Java替换CSS样式“：before”槽CSS样式可编辑

0 个答案: