CSS转换JS功能不能正常工作

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）I加入此具有所需参数的HTML元素：

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

</div> 

所有这一切的结果是，它的变化的大小和位置，而不是在我只贴上相同的值它的方式到CSS（这是我想要的）。有谁知道为什么CSS值没有被这个函数正确分配？

Answer 1

尝试，这样你不反复使用的函数参数变量改变你的功能再次（你使用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; 
    } 

你也可能会认为有关迁移到一个JS库像JQuery，您可以更轻松地在DOM对象上设置CSS。

Answer 2

你的错误就在于，你的函数接受5个值到同一个变量：

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

所以你cssValue将始终等于“自动”。

同时建议您描述自己弹出一个单独的CSS类，然后在JS功能的变化仅仅是产品类别：

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

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

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

Answer 3

这里有两种方法可以做到这一点...我加了一个红色背景只是让我可以看到发生了什么。

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

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; 
 
}

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

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

 
</div>

这里是使用jQuery一个更好的办法。

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="slot_content" id="slot1"> 
 

 
</div>