style.clip 为空——需要知道 div 的一部分是否可见答案

【问题标题】：style.clip is empty -- need to know if part of div is visiblestyle.clip 为空——需要知道 div 的一部分是否可见
【发布时间】：2014-02-09 03:10:32
【问题描述】：

我有一个简单的 div。浏览器（火狐26版）窗口缩小时，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 是 empty，没有字符串，什么都没有。我的“！DOCTYPE html”位于页面顶部。无法弄清楚，不过可能很简单。

有什么想法吗？顺便说一句：这里不会使用任何 javascript 库，只是纯自然的 javascript。

【问题讨论】：

如果没有设置rect 样式，就没有什么可以返回的吗？我认为您只是误解了这一点，除非您专门设置 rect 样式，否则它不会神奇地返回元素的哪些部分可见的值。
我认为您是说 div 的一部分在浏览器窗口之外 - 换句话说，如果您放大浏览器，则 div 将完全可见。如果是这种情况，这个线程可能会有所帮助：stackoverflow.com/questions/5353934/…

标签： javascript html css clip

【解决方案1】：

问题是当缩小浏览器窗口的宽度时，即使浏览器窗口的水平滚动条出现了，向右滚动会产生一个空白区域，即使那里有数据。我通过为 div 设置硬编码宽度来解决这个问题——还发现我可以通过编程方式随着“scrollWidth”的增加而增加 div 的宽度——这两种方法都有效。

【讨论】：