Question

1）我想更改div的CSS属性，以便在单击时弹出像模式。这个CSS代码将div的大小和位置改为我需要的东西：

 #slot1{        
      position: absolute;
      top: 10px;
      left: 20%;
      height: 600px;
      width: 60%;
      margin: auto;
}

2）为此我创建了一个JS函数，让我可以将元素的CSS更改为上面的元素：

function boxPop(id, cssValue, cssValue, cssValue, cssValue, cssValue)
    {
        document.getElementById(id).style.position = cssValue;
        document.getElementById(id).style.top = cssValue;
        document.getElementById(id).style.left = cssValue;
        document.getElementById(id).style.height = cssValue;
        document.getElementById(id).style.width = cssValue;
        document.getElementById(id).style.margin = cssValue;
    }

3）我在HTML元素中添加了所需的参数：

<div class="slot_content" id="slot1" onclick="boxPop('slot1', 'absolute', 
'10px', '20%', '600px', '60%', 'auto')">

</div>

所有这一切的结果是它确实改变了大小和位置，但是当我将相同的值粘贴到CSS（这就是我想要的）时，它的确没有改变。有谁知道为什么这个函数没有正确分配CSS值？

Answer 1

你的错误是你的函数在同一个变量中接受了5个值：

function boxPop(id, cssValue, cssValue, cssValue, cssValue, cssValue)

所以你的cssValue总是等于'auto'。

还建议您在单独的CSS类中描述弹出窗口，然后在JS函数中更改className：

.pop-up {your pop-up css here}

function boxPop(element) {element.className = 'pop-up'}

<div onclick="boxPop(this)"></div>

Answer 2

尝试更改您的功能，以便您不会反复使用函数参数变量（您反复使用cssValue）：

function boxPop(id, positionValue, topValue, leftValue, heightValue, widthValue, marginValue)
    {
        document.getElementById(id).style.position = positionValue;
        document.getElementById(id).style.top = topValue;
        document.getElementById(id).style.left = leftValue;
        document.getElementById(id).style.height = heightValue;
        document.getElementById(id).style.width = widthValue;
        document.getElementById(id).style.margin = marginValue;
    }

您也可以考虑迁移到像JQuery这样的JS库，在那里您可以更轻松地在DOM对象上设置CSS。

Answer 3

以下是两种方法...我添加了红色背景，这样我就可以看到发生了什么。

以下是使用javascript的更好方法。

＆＃13;

function boxPop(id, positionValue, topValue, leftValue, heightValue, widthValue, marginValue) {
  document.getElementById(id).style.position = positionValue;
  document.getElementById(id).style.top = topValue;
  document.getElementById(id).style.left = leftValue;
  document.getElementById(id).style.height = heightValue;
  document.getElementById(id).style.width = widthValue;
  document.getElementById(id).style.margin = marginValue;
}

＆＃13;

#slot1 {
  position: absolute;
  top: 10px;
  left: 20%;
  height: 600px;
  width: 60%;
  margin: auto;
  background: red;
}

＆＃13;

<div class="slot_content" id="slot1" onclick="boxPop('slot1', 'absolute', 
'10px', '20%', '600px', '60%', 'auto')">

</div>

＆＃13;

这是使用jQuery的更好方法。

＆＃13;

$(document).on("click", "#slot1", function(e) {
  $(this).css({
    "position": "absolute",
    "top": "10px",
    "left": "20%",
    "height": "600px",
    "width": "60%",
    "margin": "auto"
  });
});

＆＃13;

#slot1 {
  position: absolute;
  top: 10px;
  left: 20%;
  height: 600px;
  width: 60%;
  margin: auto;
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="slot_content" id="slot1">

</div>

＆＃13;

CSS过渡JS功能不起作用

3 个答案: