Kiểm tra xem phần tử có hiển thị trong DOM không

417
Hommer Smith 2013-10-30 11:45.

Có cách nào để tôi có thể kiểm tra xem một phần tử có hiển thị trong JS thuần túy (không có jQuery) hay không?

Vì vậy, ví dụ, trong trang này: Xe đạp hiệu suất , nếu bạn di chuột qua Giao dịch (ở menu trên cùng), một cửa sổ giao dịch sẽ xuất hiện, nhưng lúc đầu nó không được hiển thị. Nó nằm trong HTML nhưng nó không hiển thị.

Vì vậy, với một phần tử DOM, làm cách nào để kiểm tra xem nó có hiển thị hay không? Tôi đã thử:

window.getComputedStyle(my_element)['display']);

nhưng nó dường như không hoạt động. Tôi tự hỏi tôi nên kiểm tra thuộc tính nào. Nó xuất hiện trong đầu tôi:

display !== 'none'
visibility !== 'hidden'

Bất kỳ người khác mà tôi có thể thiếu?

17 answers

678
AlexZ 2014-02-11 22:23.

Theo tài liệu MDN này , thuộc tính của một phần tử offsetParentsẽ trả về nullbất cứ khi nào nó hoặc bất kỳ phần tử nào của nó bị ẩn thông qua thuộc tính kiểu hiển thị. Chỉ cần đảm bảo rằng phần tử không được cố định. Một tập lệnh để kiểm tra điều này, nếu bạn không có position: fixed;phần tử nào trên trang của mình, có thể giống như sau:

// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
    return (el.offsetParent === null)
}

Mặt khác, nếu bạn làm có yếu tố vị trí cố định mà có thể bị bắt trong tìm kiếm này, bạn sẽ thật đáng buồn (và chậm) phải sử dụng window.getComputedStyle(). Hàm trong trường hợp đó có thể là:

// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === 'none')
}

Tùy chọn số 2 có lẽ đơn giản hơn một chút vì nó chiếm nhiều trường hợp phức tạp hơn, nhưng tôi cá là nó cũng chậm hơn một chút, vì vậy nếu bạn phải lặp lại thao tác này nhiều lần, tốt nhất nên tránh nó.

110
guy mograbi 2015-11-01 10:49.

Tất cả các giải pháp khác đã bị hỏng vì một số tình huống đối với tôi ..

Xem câu trả lời chiến thắng phá vỡ tại:

http://plnkr.co/edit/6CSCA2fe4Gqt4jCBP2wu?p=preview

Cuối cùng, tôi quyết định rằng giải pháp tốt nhất là $(elem).is(':visible')- tuy nhiên, đây không phải là javascript thuần túy. nó là jquery ..

vì vậy tôi đã xem qua nguồn của họ và tìm thấy những gì tôi muốn

jQuery.expr.filters.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

Đây là nguồn: https://github.com/jquery/jquery/blob/master/src/css/hiisedVosystemSelectors.js

59
Ohad Navon 2017-01-18 03:36.

Nếu bạn quan tâm đến việc hiển thị bởi người dùng:

function isVisible(elem) {
    if (!(elem instanceof Element)) throw Error('DomUtil: elem is not an element.');
    const style = getComputedStyle(elem);
    if (style.display === 'none') return false;
    if (style.visibility !== 'visible') return false;
    if (style.opacity < 0.1) return false;
    if (elem.offsetWidth + elem.offsetHeight + elem.getBoundingClientRect().height +
        elem.getBoundingClientRect().width === 0) {
        return false;
    }
    const elemCenter   = {
        x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
        y: elem.getBoundingClientRect().top + elem.offsetHeight / 2
    };
    if (elemCenter.x < 0) return false;
    if (elemCenter.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
    if (elemCenter.y < 0) return false;
    if (elemCenter.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
    let pointContainer = document.elementFromPoint(elemCenter.x, elemCenter.y);
    do {
        if (pointContainer === elem) return true;
    } while (pointContainer = pointContainer.parentNode);
    return false;
}

Đã kiểm tra trên (sử dụng thuật ngữ mocha ):

describe.only('visibility', function () {
    let div, visible, notVisible, inViewport, leftOfViewport, rightOfViewport, aboveViewport,
        belowViewport, notDisplayed, zeroOpacity, zIndex1, zIndex2;
    before(() => {
        div = document.createElement('div');
        document.querySelector('body').appendChild(div);
        div.appendChild(visible = document.createElement('div'));
        visible.style       = 'border: 1px solid black; margin: 5px; display: inline-block;';
        visible.textContent = 'visible';
        div.appendChild(inViewport = visible.cloneNode(false));
        inViewport.textContent = 'inViewport';
        div.appendChild(notDisplayed = visible.cloneNode(false));
        notDisplayed.style.display = 'none';
        notDisplayed.textContent   = 'notDisplayed';
        div.appendChild(notVisible = visible.cloneNode(false));
        notVisible.style.visibility = 'hidden';
        notVisible.textContent      = 'notVisible';
        div.appendChild(leftOfViewport = visible.cloneNode(false));
        leftOfViewport.style.position = 'absolute';
        leftOfViewport.style.right = '100000px';
        leftOfViewport.textContent = 'leftOfViewport';
        div.appendChild(rightOfViewport = leftOfViewport.cloneNode(false));
        rightOfViewport.style.right       = '0';
        rightOfViewport.style.left       = '100000px';
        rightOfViewport.textContent = 'rightOfViewport';
        div.appendChild(aboveViewport = leftOfViewport.cloneNode(false));
        aboveViewport.style.right       = '0';
        aboveViewport.style.bottom       = '100000px';
        aboveViewport.textContent = 'aboveViewport';
        div.appendChild(belowViewport = leftOfViewport.cloneNode(false));
        belowViewport.style.right       = '0';
        belowViewport.style.top       = '100000px';
        belowViewport.textContent = 'belowViewport';
        div.appendChild(zeroOpacity = visible.cloneNode(false));
        zeroOpacity.textContent   = 'zeroOpacity';
        zeroOpacity.style.opacity = '0';
        div.appendChild(zIndex1 = visible.cloneNode(false));
        zIndex1.textContent = 'zIndex1';
        zIndex1.style.position = 'absolute';
        zIndex1.style.left = zIndex1.style.top = zIndex1.style.width = zIndex1.style.height = '100px';
        zIndex1.style.zIndex = '1';
        div.appendChild(zIndex2 = zIndex1.cloneNode(false));
        zIndex2.textContent = 'zIndex2';
        zIndex2.style.left = zIndex2.style.top = '90px';
        zIndex2.style.width = zIndex2.style.height = '120px';
        zIndex2.style.backgroundColor = 'red';
        zIndex2.style.zIndex = '2';
    });
    after(() => {
        div.parentNode.removeChild(div);
    });
    it('isVisible = true', () => {
        expect(isVisible(div)).to.be.true;
        expect(isVisible(visible)).to.be.true;
        expect(isVisible(inViewport)).to.be.true;
        expect(isVisible(zIndex2)).to.be.true;
    });
    it('isVisible = false', () => {
        expect(isVisible(notDisplayed)).to.be.false;
        expect(isVisible(notVisible)).to.be.false;
        expect(isVisible(document.createElement('div'))).to.be.false;
        expect(isVisible(zIndex1)).to.be.false;
        expect(isVisible(zeroOpacity)).to.be.false;
        expect(isVisible(leftOfViewport)).to.be.false;
        expect(isVisible(rightOfViewport)).to.be.false;
        expect(isVisible(aboveViewport)).to.be.false;
        expect(isVisible(belowViewport)).to.be.false;
    });
});
38
Md. Ashaduzzaman 2013-10-30 11:53.

Điều này có thể hữu ích: Ẩn phần tử bằng cách đặt nó ở vị trí ngoài cùng bên trái và sau đó kiểm tra thuộc tính offsetLeft. Nếu bạn muốn sử dụng jQuery, bạn có thể chỉ cần kiểm tra : bộ chọn hiển thị và nhận trạng thái hiển thị của phần tử.

HTML:

<div id="myDiv">Hello</div>

CSS:

<!-- for javaScript-->
#myDiv{
   position:absolute;
   left : -2000px;
}

<!-- for jQuery -->
#myDiv{
    visibility:hidden;
}

javaScript:

var myStyle = document.getElementById("myDiv").offsetLeft;

if(myStyle < 0){
     alert("Div is hidden!!");
}

jQuery:

if(  $("#MyElement").is(":visible") == true )
{  
     alert("Div is visible!!");        
}

jsFiddle

34
Yvan 2016-08-11 02:43.

Sử dụng mã tương tự như jQuery:

jQuery.expr.pseudos.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

Vì vậy, trong một hàm:

function isVisible(e) {
    return !!( e.offsetWidth || e.offsetHeight || e.getClientRects().length );
}

Hoạt động như một sự quyến rũ trong Win / IE10, Linux / Firefox.45, Linux / Chrome.52 ...

Rất cảm ơn jQuery mà không có jQuery!

17
Matthew 2015-07-10 04:25.

Kết hợp một số câu trả lời ở trên:

function isVisible (ele) {
    var style = window.getComputedStyle(ele);
    return  style.width !== "0" &&
    style.height !== "0" &&
    style.opacity !== "0" &&
    style.display!=='none' &&
    style.visibility!== 'hidden';
}

Giống như AlexZ đã nói, điều này có thể chậm hơn một số tùy chọn khác của bạn nếu bạn biết cụ thể hơn những gì bạn đang tìm kiếm, nhưng điều này sẽ nắm bắt được tất cả các cách chính mà các phần tử bị ẩn.

Tuy nhiên, nó cũng phụ thuộc vào những gì được tính là hiển thị cho bạn. Ví dụ: chiều cao của div có thể được đặt thành 0px nhưng nội dung vẫn hiển thị tùy thuộc vào thuộc tính tràn. Hoặc nội dung của div có thể được tạo cùng màu với nền để người dùng không nhìn thấy nó nhưng vẫn hiển thị trên trang. Hoặc một div có thể được di chuyển ra khỏi màn hình hoặc ẩn sau các div khác, hoặc nội dung của nó có thể không hiển thị nhưng đường viền vẫn hiển thị. Ở một mức độ nhất định "có thể nhìn thấy" là một thuật ngữ chủ quan.

12
crisc82 2019-11-29 12:47.

Câu trả lời được chấp nhận không phù hợp với tôi. Câu trả lời năm 2020 :

1) Phương thức (elem.offsetParent! == null) hoạt động tốt trên Firefox nhưng không hoạt động trong Chrome. Đối với Chrome "position: fixed;" cũng sẽ làm cho offsetParent trả về "null" ngay cả phần tử nếu hiển thị trong trang.

Bản giới thiệu:

//different results in Chrome and Firefox
console.log(document.querySelector('#hidden1').offsetParent); //null Chrome & Firefox
console.log(document.querySelector('#fixed1').offsetParent); //null in Chrome, not null in Firefox
    <div id="hidden1" style="display:none;"></div>
    <div id="fixed1" style="position:fixed;"></div>

bạn có thể thấy anh chàng này megatest https://stackoverflow.com/a/11639664/4481831 (chạy nó với nhiều trình duyệt để thấy sự khác biệt).

2) (getComputedStyle (elem) .display! == 'none') không hoạt động vì phần tử có thể ẩn vì một trong các thuộc tính hiển thị cha được đặt thành không, getComputedStyle sẽ không nắm bắt được điều đó.

Bản giới thiệu:

var child1 = document.querySelector('#child1');
console.log(getComputedStyle(child1).display);
//child will show "block" instead of "none"
<div id="parent1" style="display:none;">
  <div id="child1" style="display:block"></div>
</div>

3) The (elem.clientHeight! == 0) . Phương pháp này không bị ảnh hưởng bởi vị trí cố định và nó cũng kiểm tra xem cha mẹ của phần tử có hiển thị hay không. Nhưng nó gặp vấn đề với các phần tử đơn giản không có bố cục css, clientWidth và clientHeight báo cáo bằng 0 trong khi getBoundsClientRect là chính xác

Bản giới thiệu:

console.log(document.querySelector('#div1').clientHeight); //not zero
console.log(document.querySelector('#span1').clientHeight); //zero
<div id="div1">test1 div</div>
<span id="span1">test2 span</span>

4) (elem.getClientRects (). Length! == 0) dường như vượt qua các vấn đề của 3 phương pháp trước. Tuy nhiên, nó có vấn đề với các phần tử sử dụng thủ thuật CSS (sau đó là "display: none") để ẩn trong trang.

console.log(document.querySelector('#notvisible1').getClientRects().length);
console.log(document.querySelector('#notvisible1').clientHeight);
console.log(document.querySelector('#notvisible2').getClientRects().length);
console.log(document.querySelector('#notvisible2').clientHeight);
console.log(document.querySelector('#notvisible3').getClientRects().length);
console.log(document.querySelector('#notvisible3').clientHeight);
<div id="notvisible1" style="height:0; overflow:hidden; background-color:red;">not visible 1</div>

<div id="notvisible2" style="visibility:hidden; background-color:yellow;">not visible 2</div>

<div id="notvisible3" style="opacity:0; background-color:blue;">not visible 3</div>

KẾT LUẬN: Vì vậy, những gì tôi đã cho bạn thấy là không có phương pháp nào là hoàn hảo. Để kiểm tra khả năng hiển thị thích hợp, bạn phải sử dụng kết hợp 3 phương pháp cuối cùng.

7
Munawwar 2016-03-29 07:30.

Tôi đã có một giải pháp hiệu quả hơn so với giải pháp Kiểm tra xem phần tử có hiển thị trong DOM không khi một Kiểm tra xem phần tử có hiển thị trong DOM không có vị trí các phần tử 'cố định', nếu một người sẵn sàng bỏ qua một số trường hợp cạnh (kiểm tra nhận xét):

function isVisible(el) {
    /* offsetParent would be null if display 'none' is set.
       However Chrome, IE and MS Edge returns offsetParent as null for elements
       with CSS position 'fixed'. So check whether the dimensions are zero.

       This check would be inaccurate if position is 'fixed' AND dimensions were
       intentionally set to zero. But..it is good enough for most cases.*/
    if (!el.offsetParent && el.offsetWidth === 0 && el.offsetHeight === 0) {
        return false;
    }
    return true;
}

Lưu ý phụ: Nói một cách chính xác, "khả năng hiển thị" cần được xác định trước. Trong trường hợp của tôi, tôi đang xem xét một phần tử hiển thị miễn là tôi có thể chạy tất cả các phương thức / thuộc tính DOM trên nó mà không gặp vấn đề (ngay cả khi độ mờ là 0 hoặc thuộc tính khả năng hiển thị CSS là 'ẩn', v.v.).

6
Vlada 2015-03-09 14:41.

Nếu phần tử hiển thị thường xuyên (hiển thị: khối và visibillity: hiển thị), nhưng một số vùng chứa mẹ bị ẩn, thì chúng ta có thể sử dụng clientWidthclientHeight để kiểm tra điều đó.

function isVisible (ele) {
  return  ele.clientWidth !== 0 &&
    ele.clientHeight !== 0 &&
    ele.style.opacity !== 0 &&
    ele.style.visibility !== 'hidden';
}

Plunker (bấm vào đây)

5
Tokimon 2016-04-20 22:19.

Vì vậy, những gì tôi tìm thấy là phương pháp khả thi nhất:

function visible(elm) {
  if(!elm.offsetHeight && !elm.offsetWidth) { return false; }
  if(getComputedStyle(elm).visibility === 'hidden') { return false; }
  return true;
}

Điều này được xây dựng dựa trên những sự kiện sau:

  • Một display: nonephần tử (ngay cả một phần tử lồng nhau) không có chiều rộng cũng như chiều cao.
  • visiblityhiddenngay cả đối với các yếu tố lồng nhau.

Vì vậy, không cần thử nghiệm offsetParenthoặc lặp lại trong cây DOM để kiểm tra xem cha mẹ nào có visibility: hidden. Điều này sẽ hoạt động ngay cả trong IE 9.

Bạn có thể tranh luận nếu opacity: 0và các phần tử thu gọn (có chiều rộng nhưng không có chiều cao - hoặc ngược lại) cũng không thực sự hiển thị. Nhưng sau đó một lần nữa họ không nói ẩn.

5
Guy Messika 2017-12-05 20:29.

Một chút bổ sung cho câu trả lời của ohad navon.

Nếu tâm của phần tử thuộc về phần tử khác, chúng ta sẽ không tìm thấy nó.

Vì vậy, để đảm bảo rằng một trong những điểm của phần tử được tìm thấy là hiển thị

function isElementVisible(elem) {
    if (!(elem instanceof Element)) throw Error('DomUtil: elem is not an element.');
    const style = getComputedStyle(elem);
    if (style.display === 'none') return false;
    if (style.visibility !== 'visible') return false;
    if (style.opacity === 0) return false;
    if (elem.offsetWidth + elem.offsetHeight + elem.getBoundingClientRect().height +
        elem.getBoundingClientRect().width === 0) {
        return false;
    }
    var elementPoints = {
        'center': {
            x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
            y: elem.getBoundingClientRect().top + elem.offsetHeight / 2
        },
        'top-left': {
            x: elem.getBoundingClientRect().left,
            y: elem.getBoundingClientRect().top
        },
        'top-right': {
            x: elem.getBoundingClientRect().right,
            y: elem.getBoundingClientRect().top
        },
        'bottom-left': {
            x: elem.getBoundingClientRect().left,
            y: elem.getBoundingClientRect().bottom
        },
        'bottom-right': {
            x: elem.getBoundingClientRect().right,
            y: elem.getBoundingClientRect().bottom
        }
    }

    for(index in elementPoints) {
        var point = elementPoints[index];
        if (point.x < 0) return false;
        if (point.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
        if (point.y < 0) return false;
        if (point.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
        let pointContainer = document.elementFromPoint(point.x, point.y);
        if (pointContainer !== null) {
            do {
                if (pointContainer === elem) return true;
            } while (pointContainer = pointContainer.parentNode);
        }
    }
    return false;
}
4
XML 2013-10-30 12:04.

Nếu chúng tôi chỉ đang thu thập những cách cơ bản để phát hiện khả năng hiển thị, đừng quên:

opacity > 0.01; // probably more like .1 to actually be visible, but YMMV

Và làm thế nào để có được các thuộc tính:

element.getAttribute(attributename);

Vì vậy, trong ví dụ của bạn:

document.getElementById('snDealsPanel').getAttribute('visibility');

Nhưng cái gì? Nó không hoạt động ở đây. Nhìn kỹ hơn và bạn sẽ thấy rằng khả năng hiển thị đang được cập nhật không phải là một thuộc tính trên phần tử, mà bằng cách sử dụng thuộc styletính. Đây là một trong nhiều vấn đề khi cố gắng làm những gì bạn đang làm. Trong số những thứ khác: bạn không thể đảm bảo rằng thực sự có thứ gì đó để xem trong một phần tử, chỉ vì khả năng hiển thị, hiển thị và độ mờ của nó đều có giá trị chính xác. Nó vẫn có thể thiếu nội dung hoặc có thể thiếu chiều cao và chiều rộng. Một đối tượng khác có thể che khuất nó. Để biết thêm chi tiết, một tìm kiếm nhanh trên Google cho thấy điều này và thậm chí còn bao gồm một thư viện để thử giải quyết vấn đề. (YMMV)

Kiểm tra phần sau, có thể là các bản sao của câu hỏi này, với các câu trả lời tuyệt vời, bao gồm một số thông tin chi tiết từ John Resig hùng mạnh. Tuy nhiên, trường hợp sử dụng cụ thể của bạn hơi khác so với trường hợp tiêu chuẩn, vì vậy tôi sẽ không gắn cờ:

(CHỈNH SỬA: MỞ NÓI LÀ CÁC TRANG CỦA ANH ẤY, KHÔNG TẠO CHÚNG, VẬY DƯỚI ĐÂY KHÔNG ĐƯỢC ÁP DỤNG) Một lựa chọn tốt hơn? Ràng buộc khả năng hiển thị của các phần tử với các thuộc tính của mô hình và luôn làm cho khả năng hiển thị phụ thuộc vào mô hình đó, giống như Angular làm với ng-show. Bạn có thể làm điều đó bằng cách sử dụng bất kỳ công cụ nào bạn muốn: Angular, JS đơn giản, bất cứ thứ gì. Vẫn tốt hơn, bạn có thể thay đổi việc triển khai DOM theo thời gian, nhưng bạn sẽ luôn có thể đọc trạng thái từ mô hình, thay vì DOM. Đọc sự thật của bạn từ DOM là không tốt. Và chậm. Tốt hơn nhiều là hãy kiểm tra mô hình và tin tưởng vào việc triển khai của bạn để đảm bảo rằng trạng thái DOM phản ánh mô hình. (Và sử dụng thử nghiệm tự động để xác nhận giả định đó.)

3
BorisOkunskiy 2015-07-02 08:39.

Chỉ để tham khảo, cần lưu ý rằng getBoundingClientRect()có thể hoạt động trong một số trường hợp nhất định.

Ví dụ: một kiểm tra đơn giản rằng phần tử bị ẩn bằng cách sử dụng display: nonecó thể trông giống như sau:

var box = element.getBoundingClientRect();
var visible = box.width && box.height;

Điều này cũng rất tiện lợi vì nó cũng bao gồm không chiều rộng, không chiều cao và position: fixedcác trường hợp. Tuy nhiên, nó sẽ không báo cáo các yếu tố ẩn với opacity: 0hoặc visibility: hidden(nhưng cũng không offsetParent).

3
Israel 2019-01-15 10:16.

Cải thiện câu trả lời của @Guy Messika ở trên , ngắt và trả về sai nếu điểm chính giữa 'X <0 là sai vì phần tử bên phải có thể đi vào khung nhìn. đây là một sửa chữa:

private isVisible(elem) {
    const style = getComputedStyle(elem);

    if (style.display === 'none') return false;
    if (style.visibility !== 'visible') return false;
    if ((style.opacity as any) === 0) return false;

    if (
        elem.offsetWidth +
        elem.offsetHeight +
        elem.getBoundingClientRect().height +
        elem.getBoundingClientRect().width === 0
    ) return false;

    const elementPoints = {
        center: {
            x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
            y: elem.getBoundingClientRect().top + elem.offsetHeight / 2,
        },
        topLeft: {
            x: elem.getBoundingClientRect().left,
            y: elem.getBoundingClientRect().top,
        },
        topRight: {
            x: elem.getBoundingClientRect().right,
            y: elem.getBoundingClientRect().top,
        },
        bottomLeft: {
            x: elem.getBoundingClientRect().left,
            y: elem.getBoundingClientRect().bottom,
        },
        bottomRight: {
            x: elem.getBoundingClientRect().right,
            y: elem.getBoundingClientRect().bottom,
        },
    };

    const docWidth = document.documentElement.clientWidth || window.innerWidth;
    const docHeight = document.documentElement.clientHeight || window.innerHeight;

    if (elementPoints.topLeft.x > docWidth) return false;
    if (elementPoints.topLeft.y > docHeight) return false;
    if (elementPoints.bottomRight.x < 0) return false;
    if (elementPoints.bottomRight.y < 0) return false;

    for (let index in elementPoints) {
        const point = elementPoints[index];
        let pointContainer = document.elementFromPoint(point.x, point.y);
        if (pointContainer !== null) {
            do {
                if (pointContainer === elem) return true;
            } while (pointContainer = pointContainer.parentNode);
        }
    }
    return false;
}
2
Scott Izu 2014-11-14 08:02.

Mã jQuery từ http://code.jquery.com/jquery-1.11.1.js có tham số isHidden

var isHidden = function( elem, el ) {
    // isHidden might be called from jQuery#filter function;
    // in that case, element will be second argument
    elem = el || elem;
    return jQuery.css( elem, "display" ) === "none" || !jQuery.contains( elem.ownerDocument, elem );
};

Vì vậy, có vẻ như có một kiểm tra bổ sung liên quan đến tài liệu chủ sở hữu

Tôi tự hỏi liệu điều này có thực sự bắt gặp các trường hợp sau đây không:

  1. Các phần tử ẩn đằng sau các phần tử khác dựa trên zIndex
  2. Các phần tử có độ trong suốt làm cho chúng trở nên vô hình
  3. Các phần tử được định vị ngoài màn hình (tức là bên trái: -1000px)
  4. Các phần tử có khả năng hiển thị: ẩn
  5. Các phần tử có màn hình: không có
  6. Các phần tử không có văn bản hoặc phần tử phụ hiển thị
  7. Các phần tử có chiều cao hoặc chiều rộng được đặt thành 0
0
not_specified 2015-08-25 18:01.

Đây là đoạn mã tôi đã viết để tìm phần tử duy nhất có thể nhìn thấy trong số một vài phần tử tương tự và trả về giá trị của thuộc tính "class" mà không có jQuery:

  // Build a NodeList:
  var nl = document.querySelectorAll('.myCssSelector');

  // convert it to array:
  var myArray = [];for(var i = nl.length; i--; myArray.unshift(nl[i]));

  // now find the visible (= with offsetWidth more than 0) item:
  for (i =0; i < myArray.length; i++){
    var curEl = myArray[i];
    if (curEl.offsetWidth !== 0){
      return curEl.getAttribute("class");
    }
  }
0
Ajas Jansher 2018-05-27 23:18.

Đây là những gì tôi đã làm:

HTML & CSS: Đã đặt phần tử ẩn theo mặc định

<html>
<body>

<button onclick="myFunction()">Click Me</button>

<p id="demo" style ="visibility: hidden;">Hello World</p> 

</body>
</html> 

JavaScript: Đã thêm mã để kiểm tra xem khả năng hiển thị có bị ẩn hay không:

<script>
function myFunction() {
   if ( document.getElementById("demo").style.visibility === "hidden"){
   document.getElementById("demo").style.visibility = "visible";
   }
   else document.getElementById("demo").style.visibility = "hidden";
}
</script>

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Trong Saturday Night Live, The Bachelor is Bland và Tina Fey trở lại với vai 'Crazy' Sarah Palin

Trong Saturday Night Live, The Bachelor is Bland và Tina Fey trở lại với vai 'Crazy' Sarah Palin

Sau khi Sarah Palin tán thành Donald Trump vào đầu tuần này, gần như không thể tránh khỏi việc Tina Fey sẽ trở lại Saturday Night Live để thăm lại ấn tượng Palin cổ điển của cô. Và Fey chắc chắn đã không làm thất vọng, cô ấy đã đưa ra một lời khen ngợi không hề nhẹ về bài phát biểu chứng thực Iowa quanh co và khó hiểu của Palin trong khi Trump của Darrell Hammond đưa ra bình luận xuyên suốt.

Đây có phải là sự khởi đầu cho sự kết thúc của việc giam giữ Brittney Griner?

Đây có phải là sự khởi đầu cho sự kết thúc của việc giam giữ Brittney Griner?

Brittney Griner (r.) Ngay từ đầu, thân phận của Brittney Griner đã là tình huống con tin Mỹ độc nhất trong lịch sử hiện đại.

Tom Brady là bộ tứ vệ đầu tiên cuối cùng có thể giúp Julio Jones có hơn 10 lần chạm bóng trong một mùa giải

Tom Brady là bộ tứ vệ đầu tiên cuối cùng có thể giúp Julio Jones có hơn 10 lần chạm bóng trong một mùa giải

Chúng ta có thể thấy nhiều hơn nữa về một Julio Jones khỏe mạnh trong khu vực cuối năm nay. John Parker Wilson, Greg McElroy, A.

Đó phải là Đức

Đó phải là Đức

Đối với đội tuyển Anh, không có kẻ thủ ác nào lớn hơn Hầu hết các cổ động viên Anh, nếu không muốn nói là tất cả, hẳn sẽ phải gật gù khi tiếng còi mãn cuộc của trận bán kết lượt về W Euro 2022 vang lên. Bởi vì nó báo hiệu rằng Đức sẽ chờ đợi ở Wembley trong trận chung kết với Anh và là điều duy nhất giữa Anh và chiếc cúp lớn đầu tiên của đội tuyển nữ.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language