<!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>