जानकारी प्राप्त करें एचटीएमएल ऊंचाई शैली द्वारा या सामग्री

Question

द्वारा निर्धारित है अगर मैं 2 divs है:

<div id="div1"></div> 
<div id="div2">div2</div>​ 

मेरी सीएसएस में

:

#div1{ height:20px}​ 

दोनों divs 20px ऊंचाई है, जाँच demo
कैसे क्या मुझे पता चल सकता है कि सामग्री के कारण div की ऊंचाई है या सीएसएस या इनलाइन शैली में सेट किया गया है?
इससे मुझे पता चलता है कि आयाम डेवलपर द्वारा निर्धारित किए गए हैं या बस ब्राउज़र द्वारा गणना की गई है।

Answer 1

मैं इस समारोह में यह :)

function getRealHeight(element){ 
    var height=0; 
    if (element.children().length>0){ 
     var temp = $('<div></div>'); 
     temp.append(element.children()); 
     height = element.height(); 
     element.append(temp.children()); 
    } else { 
     var html=element.html(); 
     element.html(''); 
     height = element.height(); 
     element.html(html); 
    } 
    return height; 
} 

DEMO

Answer 2

आप सीएसएस ऊंचाई मूल्य की खोज करने और इसकी तुलना करने के लिए jQuery का उपयोग कर सकते हैं?

Answer 3

<div id="div-styled" style="height: 20px"></div> 
<div id="div-unstyled"></div> 

इनलाइन सीएसएस के साथ height संपत्ति के लिए चेक सादा जावास्क्रिप्ट

document.getElementById('div-styled').style.height // "20px" 
document.getElementById('div-unstyled').style.height.length // 0 

---

अद्यतन

jQuery बाहरी स्टाइल शीट से शैली नियमों के साथ-साथरिटर्न

var $el = $('#container'); 
 
$el.html($el.css('height'));

#container { 
 
    height: 42px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div id="container"></div>

Answer 4

उपयोग हासिल करने के लिए एक रास्ता मिल गया:

function emptyHeight (elem) { 
    var $temp = $('<div />'); 
    var $elem = $(elem); 
    var height; 

    $temp.append($elem.contents()); 
    height = $elem.height(); 
    $elem.append($temp.contents()); 

    return height; 
} 

विचार अस्थायी रूप से तत्व से सभी बाल नोड्स को अलग करना है। बच्चों के साथ एक तत्व की ऊंचाई 0, है जब तक इसकी ऊंचाई सीएसएस के माध्यम से सेट की जाती है।

उस कार्य में अपना DIV तत्व पास करें। यदि यह 0 देता है, तो इसका मतलब है कि DIV नहीं इसकी ऊंचाई सीएसएस के माध्यम से सेट है।

if (emptyHeight(yourDiv) === 0) { 
    // the DIV does not have any height value set via CSS 
} else { 
    // the DIV has a CSS height set 
}