本文介绍了JavaScript：检查两个div之间的冲突的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有没有办法检查名为"Character"的DIV是否与名为"GROUND"的DIV重叠？
我想用干净的Java脚本来做这件事，我知道jQuery更好，但那不是我想要的。 我看到这个帖子：check collision between certain divs?，但它没有返回任何东西。
感谢您的帮助。
推荐答案
首先，我建议您查看HTML5canvas元素，根据它的声音，您想要做一个游戏，canvas非常适合；)
但是，为了回答您的问题，您可以分别使用document.createElement()或getElementById()创建或获取div元素，并通过获取它们的js设置值(element.style)或使用getComputedStyle来获取它们的样式属性。
请确保，无论您如何获得这些CSS属性，都需要将它们解析为JS可以消化的内容。对于基于整数的位置，parseInt()通常有效。
下一步，你来算一算。在本例中，您需要查看角色div的顶部加上其高度是否大于地面的顶部位置。如果是，则它已发生冲突。
若要将样式设置回div，只需设置Style属性。
这里有一个例子(复制自this fiddle)：
数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">var character = document.getElementById("character");
var ground = document.getElementById("ground");
//We could use getComputedStyle to get the style props,
//but I'm lazy
character.style.top = "10px";
character.style.height = "40px";
ground.style.top = "250px";
//For every 33ms (about 30fps)
setInterval(function(){
//Get the height and position of the player
var charTop = parseInt(character.style.top),
charHeight = parseInt(character.style.height);
//and the top of the ground
var groundTop = parseInt(ground.style.top);
//linear gravity? Why now?
charTop += 5;
//If the character's bottom is hitting the ground,
//Stop moving
if(charTop + charHeight > groundTop) {
charTop = groundTop - charHeight;
}
//Set the character's final position
character.style.top = charTop + "px";
},33);#character {
position: absolute;
width: 40px;
height: 40px;
left: 50px;
background-color: #F00;
}
#ground {
position: absolute;
width: 300px;
height: 60px;
left: 0px;
background-color: #A66;
}<div id="character"></div>
<div id="ground"></div>还有一件事：虽然当元素使用不同的定位属性(例如：球员使用top/left坐标，其中地面使用bottom)时，获取元素位置的方法很复杂，但管理起来要困难得多。
这篇关于JavaScript：检查两个div之间的冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！