1、首先我们新建一个测试项目然后新建一个index.html、basic.js和basic.css文件。
2、js修改html文件中div的style中值来修改div的高度 HTML文件中的文件代码如图所示。
3、运行之后我们看到两个div的高度是一样的 接下来我们就使用js修改高度。
4、这时我们敲js中的代码 获取div1的id 使用css属性对应的style属性然后设置高度 如图所示。
5、使用js修改CSS文件中的div的height的值 HTML文件中的代码。
6、然后我们是在js文件中获取div1的id属性 然后使用obj.style.cssTest来修改嵌入式的css。
7、然后运行项目之后 两次结果都是一样的 div的高度改变了 。
HTML：<div class="main">
<div class="col-left">左边列</div>
<div class="col-main">主体列</div>
</div>
CSS：
.main{width:960pxoverflow:hidden}
.col-left{float:leftwidth:200pxpadding-bottom:10000pxmargin-bottom:-10000pxmargin-right:20px}
.col-right{float:rightwidth:740px}
左边列跟着右边的高度自适应。这是纯CSS的方法。
放大一定会失真，缩小却不会，只要用js控制图片的宽或者就可以，只需要控制一个就可以，给你个js函数function DrawImage(ImgD,ImgW){
//图片大小控制ImgD图片路径，ImgW是宽或高，看效果，看代码
var image=new Image()
image.src=ImgD.src
if(image.width>0 &&image.height>0){
if(image.width/image.height>= 1){
if(image.width>ImgW){
ImgD.width=ImgW
ImgD.height=(image.height*ImgW)/image.width
}else{
ImgD.width=image.width
ImgD.height=image.height
}
ImgD.alt=image.width+"×"+image.height
}
else{
if(image.height>ImgW){
ImgD.height=ImgW
ImgD.width=(image.width*ImgW)/image.height
}else{
//ImgD.width=(image.width*ImgW)/image.height
ImgD.width=image.width
ImgD.height=image.height
}
ImgD.alt=image.width+"×"+image.height
}
}
}
