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

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?

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

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

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;
    });
});

Đ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

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!

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.

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.

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

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 clientWidth và clientHeight để 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)

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.
• visiblitylà hiddenngay 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.

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

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

• Làm cách nào để biết liệu phần tử DOM có hiển thị trong chế độ xem hiện tại hay không?
• Làm cách nào để kiểm tra xem một phần tử có thực sự hiển thị bằng javascript hay không?

(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 đó.)

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

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

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

Đâ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");
    }
  }

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