获取div的高度和宽度-讲解js设置元素style属性

这个问题在新项目中有时候会碰到:一行有三个div，期待这三个div把显示屏总宽均分，相对高度相当于总宽。

第一个难题:显示屏总宽等分。

您能够设定div的百分数总宽，而不是立即应用px总宽。这儿应用了回应设计方案的观念。你能参照本文:响应式网站网页制作。

第二个难题:动态性设定相对高度和总宽一致。

有这两种方式，一种是用js动态性设定，另一种是立即用CSS设定。

先看一下html编码。

一些文本

一些文本

一些文本

1234567891011121314151617181920212223

的普遍CSS。

ul，li{

目录式:无；

}

* {

行高:0；

添充:0；

考试大纲:0

}

文章正文{

行高:0；

添充:0；

-web kit-外型:无；

字体样式系列产品:“Helvetica新”，Helvetica，Arial，无衬线；

文字大小:16px

}

ul{

行高:10px

}

。海运集装箱

表明:内嵌块；

部位:相对性；

总宽:32%；

文字两端对齐:垂直居中；

}

123456789101112131415161718192021222324

用js动态性设定。

var cw = $('。人偶')。总宽()；

$('.人偶')。CSS({ ' height ':CW ' px ' })；

$(对话框)。调节尺寸(涵数(){ 0

var cw = $('。人偶')。总宽()；

$('.人偶')。CSS({ ' height ':CW ' px ' })；

});

123456

用CSS设定。

。人偶{

添充-顶端:100%；/* 1:1纵横比*/

总宽:100%；

环境:# 333333；

}

12345

设定CSS添充-top的基本原理:应用CSS特定一个液体原素的纵横比。

/———————————————————

随后选择将照片的相对高度设定为相当于动态性总宽。

js方式比较简单，和上边的方式基本一致。

一些文本

一些文本

一些文本

1234567891011121314151617181920

。海运集装箱

表明:内嵌块；

部位:相对性；

总宽:32%；

文字两端对齐:垂直居中；

}

.container img{。器皿img{

总宽:100%；

个子:100%；

}

12345678910

var cw = $('。人偶')。总宽()；

$('.人偶')。CSS({ ' height ':CW ' px ' })；

$(对话框)。调节尺寸(涵数(){ 0

var cw = $('。人偶')。总宽()；

$('.人偶')。CSS({ ' height ':CW ' px ' })；

});

123456

CSS方式

一些文本

一些文本

一些文本

1234567891011121314151617181920212223

。海运集装箱

表明:内嵌块；

部位:相对性；

总宽:32%；

文字两端对齐:垂直居中；

}

。人偶{

添充-顶端:100%；/* 1:1纵横比*/

总宽:100%；

环境:url(images/test_3.jpg)无反复；

-web kit-环境-规格:100%；

环境规格:100%；

}

12345678910111213

你能进行设定环境来完成。

div包括img的方式沒有实验取得成功，之后再次试着包括divimg的方式并未取得成功检测，请稍后重试。

/————————————-

还有一个难题，如何设置div和img中间的padding，又能确保div总宽是显示屏高度的三分之一？还有一个难题，怎么设置div和img中间的添充，确保div的间距是显示屏高度的三分之一？