01/10/2018, 09:37

Lấy chiều rộng của dãy block bằng script

Đầu tiên thì giải thích rõ, mình học thiết kế, và đang chuyên thiết kế web. Đang bắt đầu mở rộng sang học code để nhằm mục đích tự chủ thiết kế, tạo ra thiết kế trực quan chứ không chỉ bằng hình ảnh nữa. Với tình hình thực tại thì tầm 6 tháng nữa mới bắt đầu chạm đến được với Js. Nhưng giờ đang có một thiết kế hay hay, muốn làm thử nên lên đây nhờ mọi người giúp đỡ.

Mình đang có một cái web responsive với các block A ( chiều rộng cố định là 180px ) sắp xếp theo 1,2,3 … 8 block liền nhau dựa theo chiều rộng của block CONTENT (CONTENT luôn thay đổi theo nhiều yếu tố) . Mà một block B khác sẽ có chiều rộng bằng chiều rộng của các block A.
Trước, giải pháp của mình là tạo một block C gom các block A lại. Đo chiều rộng của block C và gán chiều rộng đó cho B. Nhưng gặp cái vấn đề là block C sẽ chịu giới hạn của các css. Nhiều khi có css khác áp dụng sẽ gây xung đột.
Bây giờ giải pháp khác là sẽ đo chiều rộng của block CONTENT rồi chia cho 180(px). Lấy phần nguyên trong số thâp phân, rồi lại nhân lại cho 180(px) thì sẽ ra được chiều rộng của các block A mà không cần sự tồn tại của block C nữa.

4.jpg500x1131 224 KB

EX: https://jsfiddle.net/bindo1995/L5m09f3q/ (ANH EM SỬA TRỰC TIẾP TRONG jsfiddle RỒI POST LẠI)

Vấn đề, giải pháp thì có nhưng cái tầm với của Js chưa đến được. Mong anh em giúp đỡ và tạo ra một cái js ví dụ trực quan. Cảm ơn anh em !

Tài Sáng viết 11:47 ngày 01/10/2018

Giải thích dài quá, rối rắm, đọc 15 phút mới hiểu dc cái mô tả chính đó là ‘Mà một block B khác sẽ có chiều rộng bằng chiều rộng của các block A’

Đoạn script mà bạn muốn đây :

var blocks_a = document.querySelectorAll('.a');
var totalWidth = 0;

for (var i=0; i<blocks_a.length; i++) {
	totalWidth += blocks_a[i].offsetWidth;
}

console.log('totalWidth ', totalWidth);

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

Lê Tùng

0 chủ đề

0 bài viết

Tác giả nổi bật