Tôi chắc chắn đây là nơi nào đó trong thanh tra công cụ dành cho nhà phát triển, nhưng tôi không thể tìm thấy nó. Tôi sẽ tìm thấy đâu, cho một phần tử đã cho (ví dụ, một div), các kích thước được tính toán (chiều cao và chiều rộng) của một phần tử đã cho mà tôi nhấp chuột phải và chọn "Kiểm tra phần tử"?Cách tìm kích thước tính toán của bất kỳ phần tử nào trong Công cụ dành cho nhà phát triển Chrome?
Cách tìm kích thước tính toán của bất kỳ phần tử nào trong Công cụ dành cho nhà phát triển Chrome?
Trả lời
Chỉ cần di chuột qua tên phần tử trong ruy-băng bên dưới bảng công cụ dành cho nhà phát triển. Phần tử tương ứng sẽ được đánh dấu trong cửa sổ trình duyệt và kích thước xuất hiện ở một góc của nó. Ngoài ra, nếu bạn cuộn xuống ngăn bên phải trong công cụ nhà phát triển, bạn sẽ thấy cửa sổ 'Số liệu' sẽ cung cấp cho bạn kích thước được tính và cả lề, đệm, đường viền, v.v.
Đây là ảnh chụp màn hình của kích thước của div chứa câu hỏi SO của bạn. Lưu ý các kích thước ở góc dưới bên trái của vùng được đánh dấu khi tôi di chuột qua tên div ở dưới cùng. Ở bên phải là cửa sổ Metrics.
Đối với câu hỏi tương lai, chỉ cần đề cập đến Google của nice documentation đầu tiên.
+1 câu trả lời tuyệt vời. Cảm ơn bạn đã chụp màn hình! –
Liên kết tài liệu của Google hiện đã bị hỏng. Hiện tại, bạn có thể tìm thấy trang tại https://developer.chrome.com/devtools – OscillatingEthmoid
Trong phiên bản "46.0.2490.86 m", không có "Kiểu được tính toán" và cửa sổ Số liệu cho biết 100% x 100%. :( – LGT
- 1. Công cụ phủ sóng xây dựng cho các công cụ dành cho nhà phát triển chrome
- 2. Google Chrome sao chép đường dẫn CSS trong Công cụ dành cho nhà phát triển
- 3. Công cụ dành cho nhà phát triển Chrome. Điểm ngắt sửa đổi subtree DOM?
- 4. Chụp ảnh màn hình của Chrome bằng Công cụ dành cho nhà phát triển Chrome?
- 5. Công cụ dành cho nhà phát triển Chrome: Tài nguyên tốt nhất để tìm hiểu các tính năng nâng cao?
- 6. Công cụ chọn màu - đề xuất cho các công cụ dành cho nhà phát triển Chrome
- 7. Tùy chỉnh phím tắt Công cụ dành cho nhà phát triển Google Chrome trên máy Mac
- 8. Công cụ dành cho nhà phát triển Chrome đóng băng trang
- 9. Thay đổi tệp JavaScript trên Công cụ dành cho nhà phát triển của Google Chrome
- 10. Tắt tự động lưu thay đổi CSS trong Công cụ dành cho nhà phát triển Chrome
- 11. Công cụ dành cho nhà phát triển Chrome ánh xạ vùng làm việc
- 12. Nhận số dòng trong cửa sổ Thành phần của Công cụ dành cho nhà phát triển Chrome?
- 13. Tắt chức năng $ của Công cụ dành cho nhà phát triển Chrome
- 14. Viết JavaScript trong công cụ dành cho nhà phát triển Chrome
- 15. Công cụ dành cho nhà phát triển không hoạt động trong Chrome osx
- 16. Công cụ dành cho nhà phát triển Android khác
- 17. "Sao chép vị trí có thông số" cho Công cụ dành cho nhà phát triển của Google Chrome?
- 18. Cách lặp lại yêu cầu POST bằng các công cụ dành cho nhà phát triển của Chrome?
- 19. Gỡ lỗi iframe bằng công cụ nhà phát triển Chrome
- 20. Làm cách nào để xem kích thước dữ liệu được đăng lên biểu mẫu trong Công cụ dành cho nhà phát triển Chrome?
- 21. Công cụ GUI dành cho nhà phát triển và quản trị dành cho Hadoop
- 22. HTML Body cho biết cz-shortcut-listen = "true" với Công cụ dành cho nhà phát triển của Chrome?
- 23. Làm cách nào để tạo một phần tử trong Công cụ dành cho Chrome Dev?
- 24. Công cụ dành cho nhà phát triển Chrome: tìm kiếm không phân biệt chữ hoa chữ thường
- 25. Tại sao Công cụ dành cho nhà phát triển IE8 của tôi không hoạt động?
- 26. Kiểm tra trong IFrame trong Công cụ dành cho nhà phát triển IE8?
- 27. Gỡ lỗi ngoại lệ Dom bằng các công cụ dành cho nhà phát triển chrome trong jquery
- 28. Thanh công cụ dành cho nhà phát triển tốt nhất cho IE là gì?
- 29. Không thể thấy mã được tải động trong Công cụ dành cho nhà phát triển Chrome 22
- 30. Xuất dữ liệu từ công cụ nhà phát triển Chrome
'Kiểm tra phần tử', nhìn vào ngăn bên phải, nhấp vào 'các kiểu được tính' là bảng điều khiển trên cùng. Hoặc sử dụng bảng điều khiển 'chỉ số'. Nhưng đây không phải là một câu hỏi lập trình, tôi nghĩ vậy. –