js：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>div100</title> <style> div{ width: 50px; height: 50px; border: 1px solid #DCDCDC; background: deeppink; position: absolute; left: 0; top: 0; font-size: 24px; color: white; font-weight: bold; text-align: center; line-height: 50px; } </style> <script> window.onload = function(){ var aDiv = document.getElementsByTagName('div'); var str = ""; for(var i = 0,j = 0;i<100;i++ ){ str += "<div>"+ i + "</div>"; } document.body.innerHTML = str; for(var i = 0;i<aDiv.length;i++){ aDiv[i].style.left = (i%10-1)*60 + "px"; if(i%10 == 0 && i!= 0){ aDiv[i].style.top = (i%10-1)*60 + "px"; } } } </script> </head> <body> </body> </html> jq:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>div100</title> <style> div{ width: 50px; height: 50px; border: 1px solid #DCDCDC; background: deeppink; position: absolute; left: 0; top: 0; font-size: 24px; color: white; font-weight: bold; text-align: center; line-height: 50px; } </style> <script> window.onload = function(){ var aDiv = document.getElementsByTagName('div'); var str = ""; for(var i = 0,j = 0;i<100;i++ ){ str += "<div>"+ i + "</div>"; } document.body.innerHTML = str; for(var i = 0;i<aDiv.length;i++){ aDiv[i].style.left = (i%10-1)*60 + "px"; if(i%10 == 0 && i!= 0){ aDiv[i].style.top = (i%10-1)*60 + "px"; } } } </script> </head> <body> </body> </html> 文章来源: https://blog.csdn.net/a772116804/article/details/90297670