Thật dễ dàng để sửa đổi các kiểu phần tử nhưng hơi khó đọc giá trị.
JavaScript không thể đọc bất kỳ thuộc tính kiểu phần tử nào (elem.style) đến từ css (bên trong / bên ngoài) trừ khi bạn sử dụng lệnh gọi phương thức tích hợp getComputingStyle trong javascript.
getComputingStyle (phần tử [, giả])
Phần tử: Phần tử để đọc giá trị cho.
giả: Một phần tử giả nếu được yêu cầu, ví dụ :: trước. Một chuỗi rỗng hoặc không có đối số có nghĩa là chính phần tử.
Kết quả là một đối tượng có thuộc tính kiểu, như elem.style, nhưng bây giờ đối với tất cả các lớp css.
Chẳng hạn, ở đây phong cách không thấy lề:
<head>
<style> body { color: red; margin: 5px } </style>
</head>
<body>
<script>
let computedStyle = getComputedStyle(document.body);
// now we can read the margin and the color from it
alert( computedStyle.marginTop ); // 5px
alert( computedStyle.color ); // rgb(255, 0, 0)
</script>
</body>
Vì vậy, đã sửa đổi mã javaScript của bạn để bao gồm getComputingStyle của phần tử bạn muốn lấy chiều rộng / chiều cao hoặc thuộc tính khác
window.onload = function() {
var test = document.getElementById("test");
test.addEventListener("click", select);
function select(e) {
var elementID = e.target.id;
var element = document.getElementById(elementID);
let computedStyle = getComputedStyle(element);
var width = computedStyle.width;
console.log(element);
console.log(width);
}
}
Giá trị được tính toán và giải quyết
Có hai khái niệm trong CSS:
Giá trị kiểu được tính là giá trị sau khi tất cả các quy tắc CSS và kế thừa CSS được áp dụng, là kết quả của bậc thang CSS. Nó có thể trông giống như chiều cao: 1em hoặc cỡ chữ: 125%.
Giá trị kiểu được giải quyết là giá trị cuối cùng được áp dụng cho phần tử. Các giá trị như 1em hoặc 125% là tương đối. Trình duyệt lấy giá trị được tính toán và làm cho tất cả các đơn vị cố định và tuyệt đối, ví dụ: height: 20px hoặc font-size: 16px. Đối với các thuộc tính hình học, các giá trị được phân giải có thể có một dấu phẩy động, như chiều rộng: 50,5px.
Cách đây rất lâu getComputingStyle đã được tạo để lấy các giá trị được tính toán, nhưng hóa ra các giá trị được giải quyết thuận tiện hơn nhiều và tiêu chuẩn đã thay đổi.
Vì vậy, ngày nay getComputingStyle thực sự trả về giá trị đã giải quyết của thuộc tính.
Xin lưu ý:
getComputingStyle yêu cầu tên thuộc tính đầy đủ
Bạn phải luôn luôn yêu cầu thuộc tính chính xác mà bạn muốn, như paddingLeft hoặc chiều cao hoặc chiều rộng. Nếu không, kết quả chính xác không được đảm bảo.
Chẳng hạn, nếu có thuộc tính paddingLeft / paddingTop, thì chúng ta nên lấy gì cho getComputingStyle (elem) .padding? Không có gì, hoặc có thể là một giá trị được tạo ra từ các bộ đệm đã biết? Không có quy tắc chuẩn ở đây.
Có những mâu thuẫn khác. Ví dụ: một số trình duyệt (Chrome) hiển thị 10px trong tài liệu bên dưới và một số trình duyệt (Firefox) - không:
<style>
body {
margin: 30px;
height: 900px;
}
</style>
<script>
let style = getComputedStyle(document.body);
alert(style.margin); // empty string in Firefox
</script>
để biết thêm thông tin https://javascript.info/styles-and-groupes