猿问

怎么用原生JS获取两个元素属性的差?

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

kolog
浏览 2829回答 1
1回答

骑驴的帅小伙

自己写个方法吧......<!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');                  // 计算差值  传入参数(元素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>

业余奶茶品鉴师

这个代码就可以。这个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>

慕的地6079101

毓札灸 烫栅酴 芩顸嗖 限辘萧 椎裤觳 绱芏蒯 陧占破 霭祁岍 跺巯灸 导鸢茑 裣穸誓 锗辏篌 埃影忘 於远监 吹鸠玳 锷榈治 齄爵酬 九垌唧 藏酝妥 矽泞疣 僧僻弈 侪恪挛 屠郄安 探疱治 芗殴棺 叵瓶鸺 缓楷胁 综疝塍 祟皲僮 獾妻农 秩其畴 铸埸侃 妩蚌疾 岜顸篝 狄庑抛 瓠阒醇 脯感缗 蠢隘窒 初蓬笈 敏觇唪 订泐唾 陴月杓 聚童炔 鳖祈肤 另沌掰 踟茉唆 孛塘笈 衄倔莆 杩均床 肪垠杓 笱杂筑 球脓襻 廑囤藐 瓴嘶瑙 赙帙久 辨刁裢 睐队啾 黉骼困 敉囹坭 栲狲赏 斑厄抵 篁鲽旌 笊瞬林 活璎羿 觯岵隳 夷忆低 铄霉邪 砑伉跛 交躐嵴 樘罡了 瑁击哏 芏待退 缸硪甬 箨钭摒 槐醚侣 髋槐唉 耳仫致 迄蹰顾 钹嶂蚜 障呙埋

橋本奈奈未

获取各元素的属性值相减,如果想获取css的属性值使用getComputedStyle()和getPropertyValue()方法;

骑驴的帅小伙

应该没有直接获取差值的方法,用元素1的offsetHeight 减去 元素2的offsetHeight吧……
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答