style.clip为空 - 需要知道部分div是否可见

我有一个简单的div。当浏览器（Firefox版本26）窗口缩小时，div的可视区域部分不可见。style.clip为空 - 需要知道部分div是否可见

我需要找出何时可以看到特定位置（div的右侧中间边缘，例如）何时可见。

让我惊讶的是，以下产生一个空值 - 没有字符串，没有正弦，没有。无法弄清楚原因。我看到的文档和示例表明，style.clip应该返回一个字符串，该元素的可见部分的剪切矩形的顶部，右侧，底部，左侧值为。

例如，甚至W3schools.com shows that。

这是我的代码。

window.onresize = function(event) 
{ 
    console.log("Hi, we're about to get the clip rect for myDiv."); 
    console.log("myDiv clip rect is: " + document.getElementById('myDiv').style.clip); 
} 


    <div id="myDiv" style="height: 99%; display: inline-block; width: 99%; 
      background-color: red"></div>

我可以看到div（红色背景）。但是myDiv的style.clip是空，没有字符串，什么也没有。我的“！DOCTYPE html”位于页面的顶部。无法弄清楚，尽管可能很简单。

任何想法？顺便说一句：不会在这里使用任何JavaScript库，只是纯粹的自然JavaScript。

来源

2014-01-30 CFHcoder

如果你没有设置'rect'风格，没有什么可以返回的？我想你只是误解了这一点，除非你专门设置'rect'风格，否则它不会神奇地返回元素的哪些部分可见。 – adeneo

我想你是说div的一部分在浏览器窗口之外 - 换句话说，如果你放大了浏览器，div就会完全可见。如果是这种情况，这个线程可能会有所帮助：http://stackoverflow.com/questions/5353934/check-if-element-is-visible-on-screen – BrettFromLA

问题是，当缩小浏览器窗口的宽度时，即使浏览器窗口的水平滚动条出现，滚动到右侧也会产生一个空白区域，即使有数据存在。我通过设置div的硬编码宽度解决了这个问题 - 也发现我可以编程的方式增加div的宽度，因为'scrollWidth'增加 - 这两种方法都有效。

来源

2014-02-08 19:10:32 CFHcoder

style.clip为空 - 需要知道部分div是否可见

回答

相关问题