让所有div的宽度与高度相等
来源:原创
时间:2016-09-01
作者:脚本小站
分类:JS/JQuery
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> <style type="text/css"> .one{ border:1px solid red; width: 50%; } </style> </head> <body> <div> 呵呵 </div> <script> doSomeThing('one');//打开页面即调用,传入class名即可 window.onresize = function (){ doSomeThing('one');//屏幕改变时调用 } //让所有div的宽度等于高度 function doSomeThing(myClassName){ var aDiv=document.getElementsByTagName('div'); for(var i=0;i<aDiv.length;i++){ if(aDiv[i].className==myClassName){ aDiv[i].style.height=aDiv[i].offsetWidth+'px'; } } } </script> </body> </html>
写法二
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> <style type="text/css"> #mydiv{ width:50%; border:1px solid red; } </style> </head> <body> <div id="mydiv"> nythg fnyhf hyg </div> <script> resetHeight('mydiv'); window.onresize = function (){ resetHeight('mydiv'); } function resetHeight(divId){ var mydiv = document.getElementById(divId); mydiv.style.height = mydiv.offsetWidth+'px';//将div的宽等于div的高 } </script> </body> </html>