Tìm xem phần tử có hiển thị hay không (JavaScript)

Tôi có hàm javascript cố gắng xác định xem div có hiển thị hay không và thực hiện các quy trình khác nhau với biến đó. Tôi có thể hoán đổi thành công khả năng hiển thị phần tử bằng cách thay đổi hiển thị của nó giữa không và khối; nhưng tôi không thể lưu trữ giá trị này ...Tìm xem phần tử có hiển thị hay không (JavaScript)

Tôi đã thử nhận các phần tử hiển thị giá trị thuộc tính và tìm xem ID phần tử có hiển thị hay không nhưng không hoạt động. Khi tôi thử .getAttribute nó luôn trả về null; Tôi không chắc chắn tại sao vì tôi biết rằng id được xác định và nó có một thuộc tính hiển thị.

Đây là mã của hai phương pháp khác nhau tôi đã cố gắng:

var myvar = $("#mydivID").is(":visible"); 
var myvar = document.getElementById("mydivID").getAttribute("display");

Bất kỳ hướng dẫn hoặc trợ giúp sẽ được đánh giá rất nhiều.

Nguồn

2013-04-27 Devon Bernard

'display' là thành viên của 'tài sản style', không phải là một thuộc tính. – MaxArt

@MaxArt: Tôi đã thử sử dụng có thể nhìn thấy nhưng cũng không hoạt động. Vì vậy, nếu tôi không thể gọi hiển thị vì thuộc tính CSS của nó và không phải là thuộc tính JavaScript thì tôi sẽ theo dõi như thế nào? –

Làm cách nào để xác định "hiển thị"? Các yếu tố bên ngoài chế độ xem có được tính không? Do 'khả năng hiển thị: ẩn' cũng tính? –

Hiển thị không phải là thuộc tính, đó là thuộc tính CSS bên trong thuộc tính style.

Bạn có thể tìm kiếm

var myvar = document.getElementById("mydivID").style.display;

hoặc

var myvar = $("#mydivID").css('display');

Nguồn

2013-04-27 18:23:53 SeinopSys

Hãy thử như thế này:

$(function() { 
    // Handler for .ready() called. 
    if ($("#mydivID").is(":visible")) { 
     alert('Element is visible'); 
    } 
});

FIDDLE

Hãy chắc chắn để bao gồm các tập tin jQuery bên trong thẻ head, như sau

<head> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
</head>

Nguồn

2013-04-27 18:23:56

@ Derek 朕會功夫: Bởi vì OP đã nêu rõ trong câu hỏi rằng phương pháp này đã được thử, và không hoạt động. –

@amnotiam Không rõ ràng lắm, theo lời nói. – SeinopSys

@amnotiam - Mặc dù anh ấy nói nó không hoạt động, nhưng mã của Palash cũng hoàn toàn hợp lệ. –

Chúng ta hãy thứ hai để xem những gì .is(":visible") đang làm trong jQuery, thì chúng tôi?

Dưới đây là một liên kết: https://github.com/jquery/jquery/blob/master/src/css.js#L529

return !jQuery.expr.filters.hidden(elem);

nơi

jQuery.expr.filters.hidden = function(elem) { 
    // Support: Opera <= 12.12 
    // Opera reports offsetWidths and offsetHeights less than zero on some elements 
    return elem.offsetWidth <= 0 && elem.offsetHeight <= 0; 
};

Vì vậy, nó chỉ kiểm tra độ rộng bù đắp và chiều cao của phần tử.

Điều đó nói rằng, và cũng đáng chú ý, khi jQuery kiểm tra để xem nếu một yếu tố là ẩn (ví dụ như khi kích hoạt một 'chuyển đổi' sự kiện), nó thực hiện một kiểm tra về trưng bày tài sản và tồn tại của nó trong dom. https://github.com/jquery/jquery/blob/master/src/css.js#L43

Nguồn

2013-04-27 18:35:14

Thành thật mà nói, đây không phải là câu trả lời cho câu hỏi. – SeinopSys

Tôi không chắc chắn phiên bản nào của jQuery có nghĩa là gì, và tôi không quan tâm, nhưng phiên bản mới nhất có nhiều hơn thế - 'return elem.offsetWidth <= 0 && elem.offsetHeight <= 0 || \t \t \t (! JQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css (elem, "display")) === "none"); ' – Ian

well, it cung cấp một số hiểu biết về lý do tại sao những gì ông đã cố gắng không làm việc và/hoặc cách tiếp cận đúng, và sau đó cung cấp cái nhìn sâu sắc vào những gì nên được thực hiện đó là nhận được 'hiển thị' tài sản, mà bạn đã trả lời ... vì vậy .... –

Nếu bạn muốn làm chỉ cách javascript này bạn có thể thử

window.getComputedStyle(document.getElementById("mydivID"),null).getPropertyValue('display')

Nguồn

2016-09-26 21:53:27 Gaurav

Tìm xem phần tử có hiển thị hay không (JavaScript)

Trả lời

Các vấn đề liên quan