首頁猿問怎么用原生JS獲取兩個元素屬性的差？

怎么用原生JS獲取兩個元素屬性的差？

JavaScript

kolog 2017-08-10 15:10:22

比如高度差，TOP值的差，margin的差。。。

查看完整描述

1 回答

已采納

騎驢的帥小伙

TA貢獻16條經(jīng)驗獲得超7個贊

自己寫個方法吧......

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Document</title>
????<style?type="text/css">
????????*?{
????????????margin:?0;
????????????padding:?0;
????????}
????????
????????.div1?{
????????????width:?100px;
????????????height:?100px;
????????????background:?red;
????????????position:?absolute;
????????????top:?10px;
????????????left:?10px;
????????}
????????
????????.div2?{
????????????width:?100px;
????????????height:?200px;
????????????background:?blue;
????????????position:?absolute;
????????????top:?20px;
????????????left:?200px;
????????}
????</style>
</head>

<body>
????<div?class="div1"></div>
????<div?class="div2"></div>
????
????<script>
????????var?div1?=?document.querySelector('.div1');
????????var?div2?=?document.querySelector('.div2');
????????
????????//?計算差值??傳入?yún)?shù)(元素1,?元素2,?要計算的屬性)
????????function?dis(element1,?element2,?attr)?{
????????return?css(element1,?attr)?-?css(element2,?attr)?+?'px';
????????}
????????
????????//?獲取元素屬性?(沒處理兼容性)
????????function?css(element,?attr)?{
????????return?parseInt(getComputedStyle(element)[attr]);
????????}
????????
????????console.log(dis(div2,?div1,?'height'));
????</script>
</body>
</html>

1 反對回復 2017-08-11

業(yè)余奶茶品鑒師

TA貢獻260條經(jīng)驗獲得超388個贊

這個代碼就可以。這個js?

document.getElementById('divId').clientHeight

<!DOCTYPE?html>
<html?lang="en">
<head>
<meta?charset="UTF-8">
<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
<title>Document</title>
<style>
#div1?{
width:?100px;
height:?400px;
background:?pink;
}
#div2?{
width:?100px;
height:?200px;
background:?yellow;
}
</style>
</head>
<body>
<div?id="div1"></div>
<div?id="div2"></div>
</body>
<script>
var?div1?=?document.getElementById('div1');
var?div2?=?document.getElementById('div2');
var?h1?=?div1.clientHeight;
var?h2?=?div2.clientHeight;
console.log('高度差=?'?+?(h1?-?h2))
</script>
</html>

1 反對回復 2017-08-10