'getElementsByClassName' trong javascript không chạy
đây là code:
Css:
.nh-total{float:left ; width:500px; background:#eee}
.nh-label { float:left ;width: auto; margin-right: 5px;}
.nh-gachchan{float: left; border-bottom: 1px solid #999; margin-top: -5px}
.nh-date{float:right;margin-left: 5px; }
mục đích đoạn code này làm chức năng như sau:
có 4 div :
- label (tiêu đề bên trái)
- khoản giữa (đường line gạch chân)
- ngày tháng (bên phải)
- và div total (chứa 3 thăng trên)
khi mà tổng chiều dài text tiêu đề + ngày tháng dài ra + thì chiều dài phần line gạch chân sẽ bằng chiều dài của div tổng - ( chiều dài tiêu đề + ngày tháng )
ở đây tôi dùng javascript với cú pháp chọn đối tượng bằng id (getElementById) thì nó hiển thị đúng mong muốn , nhưng dùng id thì phải là 1 id duy nhất , nên khi sử dụng cái cụm label này cho nhiều vị trí trong trang web như vậy thì bị đụng id , kết quả là chỉ có vị trí cụm label đầu tiên hiện cái đường line chân , còn mấy vị trí khác thì không chạy được , nên tôi dùng getElementsByClassName thì nó lại không hiển thị.dù test thử chỉ có 1 cụm label thôi, như trong hình minh họa .
Nhờ anh em xem giúp vì sao mà dùng getElementsByClassName nó lại ko hiện cái đường line gạch chân.
sao mình copy-past đọa code html để mọi người khỏi gõ lại thì nó ko hiện ra nhỉ
<!DOCTYPE html>
.nh-total{float:left ; width:500px; background:#eee}
.nh-label { float:left ;width: auto; margin-right: 5px;}
.nh-gachchan{float:left; border-bottom:1px solid #999; margin-top:-5px}
.nh-date{float:right;margin-left: 5px; }
-getElementsByClassName sẽ trả về 1 HTML Collections
-HTML Collections là giống như một mảng gồm nhiều phần tử HTML bên trong
-Ví dụ
<p class="class1"></p
’ . Sau đó,var myCollection = document.getElementsByClassName("class1");
thì khi đó biếnmyCollection
là một mảng chỉ có 1 phần tử HTML đó là<p class="class1"></p>
-Cũng tương tự nếu mình cho
<div class="class1"></div>
, thì khi đómyCollection
của mình một mảng gồm 2 phần tử, vớimyCollection[0]
là<p class="class1"></p>
, cònmyCollection[1]
là <div…-nên khi bạn xài
var l = document.getElementsByClassName("nh-label")
, và tương tự cho các biến r,t thì bạn phải sử dụng thêm cú phápvar l = document.getElementsByClassName("nh-label")[0]
thì mới sử dụng được.Hy vọng giúp ích cho bạn
học rồi, giờ quên mất , cảm ơn Trung Nguyễn nhiều nha.