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

项目中有时候会遇到这个问题:一行有3个div,希望这3个div平分屏幕宽度,并且高度等于宽度。 第一个问题:平分屏幕宽度 可以对div设置百分比宽度,而不是直接用px宽度,这里用到了响应式设计的思想,可以参考这篇文章:自适应网页设计(ResponsiveWebDesign) 第二个问题:动态设置高度和宽度一致 有两种方法,一种是用js动态设置,一种是直接用CSS设置 先看下html代码 <u…

项目中有时候会遇到这个问题:一行有3个div,希望这3个div平分屏幕宽度,并且高度等于宽度。

第一个问题:平分屏幕宽度

可以对div设置百分比宽度,而不是直接用px宽度,这里用到了响应式设计的思想,可以参考这篇文章:自适应网页设计(Responsive Web Design)

第二个问题:动态设置高度和宽度一致

有两种方法,一种是用js动态设置,一种是直接用CSS设置

先看下html代码

<ul>

<li class=”container”>

<div class=”dummy”>

</div>

<div class=”element”>

some text

</div>

</li>

<li class=”container”>

<div class=”dummy”>

</div>

<div class=”element”>

some text

</div>

</li>

<li class=”container”>

<div class=”dummy”>

</div>

<div class=”element”>

some text

</div>

</li>

</ul>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

公用的CSS

ul,li{

list-style: none;

}

* {

margin: 0;

padding: 0;

outline: 0

}

body {

margin: 0;

padding: 0;

-webkit-appearance: none;

font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;

font-size: 16px;

}

ul{

margin:10px;

}

.container {

display: inline-block;

position: relative;

width: 32%;

text-align: center;

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

用js动态设置

var cw = $(‘.dummy’).width();

$(‘.dummy’).css({‘height’:cw+’px’});

$(window).resize(function() {

var cw = $(‘.dummy’).width();

$(‘.dummy’).css({‘height’:cw+’px’});

});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

用CSS设置

.dummy {

padding-top: 100%; /* 1:1 aspect ratio */

width: 100%;

background: #333333;

}

  • 1
  • 2
  • 3
  • 4
  • 5

CSS设置padding-top的原理:Use CSS to Specify the Aspect Ratio of a Fluid Element

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

然后尝试对图片设置高度等于动态宽度

js方法很简单,跟上面的方法基本相同

<ul>

<li class=”container”>

<img src=”images/test_1.jpg”/>

<div class=”element”>

some text

</div>

</li>

<li class=”container”>

<img src=”images/test_2.jpg”/>

<div class=”element”>

some text

</div>

</li>

<li class=”container”>

<img src=”images/test_3.jpg”/>

<div class=”element”>

some text

</div>

</li>

</ul>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

.container {

display: inline-block;

position: relative;

width: 32%;

text-align: center;

}

.container img{

width: 100%;

height:100%;

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

var cw = $(‘.dummy’).width();

$(‘.dummy’).css({‘height’:cw+’px’});

$(window).resize(function() {

var cw = $(‘.dummy’).width();

$(‘.dummy’).css({‘height’:cw+’px’});

});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

CSS方法

<ul>

<li class=”container”>

<div class=”dummy”>

</div>

<div class=”element”>

some text

</div>

</li>

<li class=”container”>

<div class=”dummy”>

</div>

<div class=”element”>

some text

</div>

</li>

<li class=”container”>

<div class=”dummy”>

</div>

<div class=”element”>

some text

</div>

</li>

</ul>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

.container {

display: inline-block;

position: relative;

width: 32%;

text-align: center;

}

.dummy{

padding-top: 100%; /* 1:1 aspect ratio */

width: 100%;

background:url(images/test_3.jpg) no-repeat;

-webkit-background-size: 100%;

background-size: 100%;

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

通过设置background可以实现。

div包含img的方法没有试验成功,以后继续尝试

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

还有一个问题,怎么设置div和img之间的padding,又能保证div宽度是屏幕宽度的三分之一?

本文来自投稿,不代表来拓客立场,如若转载,请注明出处:https://www.laituoke.com/ltk/10113.html