js 设置一个元素的高度,只能用style吗?

JavaScript017

js 设置一个元素的高度,只能用style吗?,第1张

JS设置一个元素的高度直接在CSS中定义其height高度是最直接高效的,也是最通用的做法。

如果在页面使用时,需要动态改变元素的高度,可以使用JS代码来重新改变这个元素的高度。比如

<div id="box" style="width:500pxheight:100pxborder:1px solid #ccc">内容</div>

<script>

//原来的div元素设置的高度是100px下面的JS可以改变其高度为300px

document.getElementById("box").style.height="300px"

</script>

//给你一个比较灵活的,可自由控制

jQuery(window).load(function () {

jQuery(".div1 img").each(function () {//div1下的img宽度、高度设置

DrawImage(this, 700, 470)//宽700,高470,自己改为相同即可。

})

})

function DrawImage(ImgD, FitWidth, FitHeight) {//下面是判断,可自己修改条件

var image = new Image()

image.src = ImgD.src

if (image.width > 0 && image.height > 0) {

if (image.width / image.height >= FitWidth / FitHeight) {

if (image.width > FitWidth) {

ImgD.width = FitWidth

ImgD.height = (image.height * FitWidth) / image.width

}else {

ImgD.width = image.width

ImgD.height = image.height

}

} else {

if (image.height > FitHeight) {

ImgD.height = FitHeight

ImgD.width = (image.width * FitHeight) / image.height

} else {

ImgD.width = image.width

ImgD.height = image.height

}

}

}

}

控制图片最大宽度和高高度,在css里面有max-width、max-height的属性,非要用js也不是不可以的,document.getElementById('id').style.maxWidth。这个属性ie6支持的不好。但是现在也不用兼容ie6了吧。如果你想宽图用最大宽度,竖图用最大高度的好,那你就加一个判断的语句再决定是max-width、还是max-height.