Kiểm tra hiển thị CSS của phần tử bằng JavaScript

97

Có thể kiểm tra xem CSS của một phần tử display == blockhay nonesử dụng JavaScript không?

javascript css

— Seth
nguồn

114

Như sdleihssirhc nói bên dưới, nếu phần tử displayđang được kế thừa hoặc được chỉ định bởi quy tắc CSS, bạn sẽ cần lấy kiểu tính toán của nó :

return window.getComputedStyle(element, null).display;

Các phần tử có một thuộc styletính sẽ cho bạn biết bạn muốn gì, nếu kiểu được khai báo nội dòng hoặc bằng JavaScript:

console.log(document.getElementById('someIDThatExists').style.display);

sẽ cung cấp cho bạn một giá trị chuỗi.

— Dan Davies Brackett
nguồn

2

Nếu nó không có css nội tuyến thì sao?

— jscripter

5

Để đơn giản, tại sao không chỉ luôn có được kiểu tính toán?

— cade galt

12

là currentStylegì? không bao giờ nghe nói về nó, cũng đã kiểm tra document.body.currentStylevà không có gì (không ngạc nhiên)

— vsync

1

@vsync (và để tham khảo trong tương lai) Theo MDN , đây là tài sản độc quyền của phiên bản cũ của Internet Explorer.

— user202729

2

Cảm ơn các ý kiến. Câu trả lời được cập nhật cho web hiện đại.

— Dan Davies Brackett

78

Nếu kiểu được khai báo nội dòng hoặc bằng JavaScript, bạn chỉ có thể lấy styleđối tượng:

return element.style.display === 'block';

Nếu không, bạn sẽ phải có kiểu tính toán và có những điểm không nhất quán trong trình duyệt. IE sử dụng một currentStyleđối tượng đơn giản , nhưng những người khác sử dụng một phương thức:

return element.currentStyle ? element.currentStyle.display :
                              getComputedStyle(element, null).display;

Bắt nullbuộc phải có trong Firefox phiên bản 3 trở xuống.

— sdleihssirhc
nguồn

điều này không nên là == trong trường hợp này?

— Kai Qing

@Kai Bộ ba bằng không ép buộc loại. Crockford giải thích tại sao , trong phần được gọi là " ===và !==Các toán tử."

— sdleihssirhc

Điều đó khá thú vị. Thật buồn cười làm sao một thứ như thế này lại có thể thoát khỏi thông báo sau bao nhiêu năm lập trình. Tôi luôn chấp nhận đề xuất rằng === là boolean nghiêm ngặt. Tốt để biết.

— Kai Qing

3

@Kai: Không có vấn đề gì với việc sử dụng ===hơn là ==ở đây, nhưng cũng không có lợi thế. Cả hai toán hạng đều được đảm bảo là chuỗi, vì vậy cả hai toán tử đều thực hiện chính xác các bước giống nhau.

— Tim Down

1

@hippietrail Và gần 10 năm sau (2019-10-27) vẫn còn vấn đề. Kiểm tra những gì MDN báo cáo

— Felipe Alameda A

37

Đối với jQuery, bạn có nghĩa là như thế này?

$('#object').css('display');

Bạn có thể kiểm tra nó như thế này:

if($('#object').css('display') === 'block')
{
    //do something
}
else
{
    //something else
}

— Kai Qing
nguồn

9

Tránh làm phức tạp câu trả lời. Tôi biết rằng jQuery đang dần trở thành một tiêu chuẩn, nhưng không có lý do gì để thêm toàn bộ khung chỉ để kiểm tra kiểu hiển thị của một phần tử.

— zzzzBov

14

Ừ nhưng tôi đã làm điều này vì mọi người khác đã đưa ra câu trả lời javascript liệu, vì vậy nếu ông đã sử dụng jquery nhưng không nói rõ sau đó sẽ có một số sử dụng trong bài

— Kai Qing

18

Câu trả lời này không chính xác như những gì bạn muốn, nhưng nó có thể hữu ích trong một số trường hợp. Nếu bạn biết phần tử có một số thứ nguyên khi được hiển thị, bạn cũng có thể sử dụng điều này:

var hasDisplayNone = (element.offsetHeight === 0 && element.offsetWidth === 0);

CHỈNH SỬA: Tại sao điều này có thể tốt hơn kiểm tra trực tiếp thuộc tính CSS display? Vì bạn không cần phải kiểm tra tất cả các phần tử cha. Nếu một số phần tử cha có display: none, phần tử con của nó cũng bị ẩn nhưng vẫn có element.style.display !== 'none'.

— Martin Jiřička
nguồn

Thật vậy, điều này là hữu ích.

— Jonatas Walker

7

Đúng.

var displayValue = document.getElementById('yourid').style.display;

— Victor
nguồn

5

JavaScript cơ bản:

if (document.getElementById("elementId").style.display == 'block') { 
  alert('this Element is block'); 
}

— Chugworth
nguồn

2

Để tìm hiểu xem nó có hiển thị bằng JavaScript thuần túy hay không, hãy kiểm tra xem thuộc tính hiển thị có phải là "không" hay không (không kiểm tra "khối", nó cũng có thể để trống hoặc "nội dòng" và vẫn hiển thị):

var isVisible = (elt.style.display != "none");

Nếu bạn đang sử dụng jQuery, bạn có thể sử dụng cái này thay thế:

var isVisible = $elt.is(":visible");

— MarkXA
nguồn

0

Với javascript thuần túy, bạn có thể kiểm tra thuộc style.displaytính. Với jQuery, bạn có thể sử dụng$('#id').css('display')

— Joyce Babu
nguồn

-1

Bạn có thể kiểm tra nó với ví dụ jQuery:

$("#elementID").css('display');

Nó sẽ trả về chuỗi với thông tin về thuộc tính hiển thị của phần tử này.

— Marek Tuchalski
nguồn