Question

我试图检查div元素中是否存在溢出，但我无法使其工作。下面是我的JavaScript和一个jsfiddle的链接。任何帮助将不胜感激！

＆＃13;

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
}

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

jfiddle example

Answer 1

首先，您声明一个JQuery对象，并将其用作常规javascript对象。

如果您想在IF语句中使用常规JavaScript，则需要声明 el 对象，如下所示：

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对象，你需要声明你的 el 对象：

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＆lt; scrollWidth不是scrollWidth＆lt; offsetWidth来知道你的元素是否有溢出。

Answer 2

您正尝试通过jQuery API访问原生DOM API方法。
jQuery API是DOM API的不必要的抽象，如果你可以使用DOM API，那么就不需要jQuery了。请参阅：http://youmightnotneedjquery.com
Element.clientHeight和Element.clientWidth比Element.offsetHeight和Element.offsetWidth更可靠。

这是一个仅使用DOM API的简单示例，无需糖。

＆＃13;

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, []);

＆＃13;

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% }

＆＃13;

<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>

＆＃13;

检查元素是否有内容溢出

2 个答案: