檢查看到的元素有內容溢出

Question

我想檢查一下div元素是否存在溢出，但我無法讓它工作。下面是我的JavaScript和一個jsfiddle與整個事物的鏈接。任何幫助，將不勝感激！

var el = $('.container_element'); 
 
if(el.scrollWidth < el.offsetWidth){ 
 
    // your element have overflow 
 
    $("nav#sub").css("background-color","red") 
 
} 
 
else if (el.scrollWidth > el.offsetWidth) 
 
{ $("nav#sub").css("background-color","grey") 
 
    //your element don't have overflow 
 
} 
 

.box 
 
{ 
 
    height:55px; 
 
    width:280px; 
 
    padding:13px; 
 
    line-height: 57px; 
 
    color:#fff; 
 
    display:inline; 
 
    text-decoration:none; 
 
    text-align:center; 
 
    white-space:no-wrap; 
 
    border-right:1px solid white 
 
} 
 

 
.box:hover { 
 
    background:#007FEB; 
 
} 
 

 
.container_element 
 
{ 
 
    white-space:nowrap; 
 
    margin-left: 10px; 
 
    overflow:hidden; 
 
    display:block; 
 
} 
 

 
.inner_container 
 
{ 
 
    width:100%; 
 
    
 
} 
 

 
#lefty,#righty { 
 
    width: 35px; 
 
    display: none; 
 
    height: 57px; 
 
    text-align: center; 
 
    color: #fff; 
 
    line-height: 57px; 
 
    cursor: pointer; 
 
    font-size: 24px; 
 
} 
 

 
#lefty { 
 
    float:left; 
 
} 
 

 
#righty { 
 
    float:right; 
 
} 
 

 
nav#sub { 
 

 
background:#4C75C6 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav id="sub" class="clearfix"> 
 
<div id="lefty">&lt;</div> 
 
<div class="container_element"> 
 
    <div class="inner_container"> 
 
    <a href="#"><div class="box">One</div></a> 
 
    <a href="#"><div class="box">Two</div></a> 
 
    <a href="#"><div class="box">Three</div></a> 
 
    <a href="#"><div class="box">Four</div></a> 
 
    <a href="#"><div class="box">Fiveddddddfivefive</div></a> 
 
    <a href="#"><div class="box">Six really lreerere</div></a> 
 
    <a href="#"><div class="box">Seven really really long</div></a> 
 
    </div> 
 
</div> 
 
<div id="righty">&gt;</div> 
 
</nav>

jfiddle example

Answer 1

首先，你聲明一個jQuery對象和你正在使用它像一個普通的JavaScript對象。

如果你想在你需要聲明你EL對象你這樣的IF語句中使用常規的JavaScript：

var el = document.getElementsByClassName("container_element")[0]; 

和你的if語句是這樣的：

if(el.offsetWidth < el.scrollWidth){ 
    // your element have overflow 
    $("nav#sub").css("background-color","red"); 
} 
else { 
    //your element don't have overflow 
    $("nav#sub").css("background-color","grey"); 
} 

但是，如果你想要使用JQuery對象，您需要聲明以下對象：

var el = $('.container_element'); 

和你的if語句是這樣的：

if($(el).prop("offsetWidth") < $(el).prop("scrollWidth")){ 
    // your element have overflow 
    $("nav#sub").css("background-color","red"); 
} 
else { 
    //your element don't have overflow 
    $("nav#sub").css("background-color","grey"); 
} 

另外在你的if語句，你要測試是否offsetWidth < scrollWidth不scrollWidth < offsetWidth知道，如果你的元素有溢出。

Answer 2

1. 您試圖通過jQuery API訪問本機DOM API方法。
2. jQuery API是DOM API的一個不必要的抽象，如果你可以使用DOM API，那麼就不需要jQuery。參見：http://youmightnotneedjquery.com
3. Element.clientHeight和Element.clientWidth比Element.offsetHeight和Element.offsetWidth更可靠。

下面是一個簡單的例子，只使用DOM API，不需要糖。

var wrps = document.querySelectorAll('.wrp'); 
 
for(var i in Object.keys(wrps)) (function(wrp, inr, ovr){ 
 
    if(wrp.scrollWidth > wrp.clientWidth) ovr.push('x'); 
 
    if(wrp.scrollHeight > wrp.clientHeight) ovr.push('y'); 
 
    inr.textContent = ovr.join(' and ') + 
 
         ['no overflow',' overflows',' overflow'][ovr.length]; 
 
})(wrps[i], wrps[i].firstElementChild, []);

body { font-size:0; margin:0 } 
 
.wrp { width:25%; height:38px; overflow:auto; display:inline-block; font-size:16px; text-indent:5px } 
 
#inr1 { width:100%; height:100% } #inr2 { width:200%; height:100% } 
 
#inr3 { width:100%; height:200% } #inr4 { width:200%; height:200% }

<div class="wrp"><div id="inr1"></div></div> 
 
<div class="wrp"><div id="inr2"></div></div> 
 
<div class="wrp"><div id="inr3"></div></div> 
 
<div class="wrp"><div id="inr4"></div></div>