相关疑难解决方法(0)

是可能的切换元件的可见性,使用函数.hide(),.show()或.toggle().

如何测试元素是可见还是隐藏？

是否有一种有效的方法来判断DOM元素(在HTML文档中)当前是否可见(出现在视口中)？

(关于Firefox的问题)

在JavaScript中,您如何检查元素是否实际可见？

我不仅仅意味着检查visibility和display属性.我的意思是,检查元素不是

• visibility: hidden 要么 display: none
• 在另一个元素下面
• 滚动屏幕边缘

由于技术原因,我不能包含任何脚本.然而,我可以使用原型,因为它已经在页面上.

无论如何只有当用户在浏览器视口中拥有视频(或视频的某个百分比)时才能自动播放HTML5视频？

在MDN的Element.clientWidth描述中,它说.

_{注意:我已经根据@potatopeelings答案更新了MDN .}

Element.clientWidth属性是元素的内部宽度(以像素为单位).它包括填充但不包括垂直滚动条(如果存在,如果呈现),边框或边距.

此属性将值舍入为整数.如果需要小数值,请使用element.getBoundingClientRect().

据我所知,除了四舍五入以外,clientWidth应该是相同的getBoundingClientRect().width.

但是我看到了很多的元素(其中display是inline？)的clientWidth(和高度)为零,而通过值返回getBoundingClientRect似乎是正确的.

在stackoverflow上搜索会带来一些答案,说明在文档准备好之前就会发生这种情况状态但我一直看到这一点,而不仅仅是在页面加载时.

这种行为对于我检查过的所有浏览器都是一致的,在哪里指定这应该是行为？

样品:

function str(name, width, height) {
  return name + ': (' + width + ', ' + height + ')';
}

function test() {
  var s = document.getElementById('s');
  var rect = s.getBoundingClientRect();
  document.getElementById('out').innerHTML =
    str('client', s.clientWidth, s.clientHeight) + '<br/>' +
    str('bounding', rect.width, rect.height);
}

 <span id="s">A span</span><br/> <button onclick="test()">Test</button>
<hr /> …

StackOverflow的是装载 有 问题有关如何检查元素是否在检视真正可见的,但它们都寻求一个布尔答案.我有兴趣获得元素的可见实际区域.

function getVisibleAreas(e) {
    ...
    return rectangleSet;
}

更正式地说 - 元素的可见区域是CSS坐标中的一组(最好是非重叠的)矩形,elementFromPoint(x, y)如果点(x,y)包含在(至少)一个矩形中,它将返回元素.集合.

在所有DOM元素(包括iframe)上调用此函数的结果应该是一组非重叠区域集,其中union是整个视口区域.

我的目标是创建一种视口"转储"数据结构,它可以有效地为视口中的给定点返回单个元素,反之亦然 - 对于转储中的给定元素,它将返回可见的集合区域.(数据结构将传递给远程客户端应用程序,因此当我需要查询视口结构时,我不一定能访问实际文档).

实施要求:

function AreaPortion(l, t, r, b, currentDoc) {
    if (!currentDoc) currentDoc = document;
    this._x = l;
    this._y = t;
    this._r = r;
    this._b = b;
    this._w …

我试图在JavaScript中进行定位.我正在使用基于经典quirksmode函数的累积位置函数,该函数对每个函数求和offsetTop,直到顶部节点.offsetLeftoffsetParent

但是,我遇到了一个问题,我感兴趣的元素offsetParent在Firefox 中没有.在IE中offsetParent存在,但是offsetTop并且offsetLeft总计为0,因此它与Firefox中的效果相同.

什么会导致在屏幕上清晰可见和可用的元素没有offsetParent？或者,更实际的是,我如何找到该元素的位置以便在其下方放置下拉？

编辑:这是如何重现这个特定的一个实例(没有通过当前接受的答案解决):

1. 打开Stack Overflow的主页.

2. 在Web浏览器的控制台中运行以下代码(例如Chromev21):

   var e = document.querySelector('div');
   console.log(e);
   // <div id="notify-container"></div>
   do{
     var s = getComputedStyle(e);
     console.log(e.tagName,s.display,s.visibility,s.position,e.offsetParent);
   } while(e=e.parentElement)
   // DIV block visible fixed null
   // BODY block visible static null
   // HTML block visible static null
   

   Run Code Online (Sandbox Code Playgroud)

为什么offsetParent那个元素null？

使用隐藏div的父级元素.divdisplay:none

• 我正在将jQuery textarea元素转储到控制台.我看到scrollHeight第0个元素的属性是88.
• 我尝试将此属性读取到var(使用$(element)[0].scrollHeight或者$(element).prop('scrollHeight')我正在获取0.

我还尝试在读取之前设置textareato position: absolute和display: blockwith jQuery,结果相同.

我该如何正确阅读该属性？

我希望检查一下使用Puppeteer和纯JavaScript(不是jQuery)可以看到DOM元素,我该怎么做？通过可见我的意思是元素通过CSS显示,而不是隐藏(f.ex.by display: none).

例如,我可以#menu通过display: none以下方式确定我的元素是否未通过CSS规则隐藏:

const isNotHidden = await page.$eval('#menu', (elem) => {
  return elem.style.display !== 'none'
})

如何确定元素是否隐藏,而不仅仅是通过display: none？

如何从包含特定文本的转发器中搜索元素？

我尝试过这样的事情:

element(by.repeater('item in array')).all(by.cssContainingText('.xyz','my item title')); // only gets the first element

我可以自己搜索使用.then,element.all但我想知道它是否存在更简单的东西,cssContainingText但对于中继器:

element(by.repeaterContainingText('item in array','my item title'))

或者像这样链接的元素:

element.all(by.repeater('item in array')).element(by.cssContainingText('.xyz','my item title'));

带过滤器的解决方案(但速度很慢)

element.all(by.repeater('item in array')).filter(function(elem){
    return elem.getText().then(function(text){
        return text.indexOf('my item title') > -1;
    });
}).then(function(filteredElements) {
    return filteredElements[0];
})