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

获取div的高度和宽度_讲解js设置元素style属性 项目中有时候会遇到这个问题：一行有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>1234567891011121314151617181920212223公用的CSSul,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;}123456789101112131415161718192021222324用js动态设置var cw = $(‘.dummy’).width();$(‘.dummy’).css({‘height’:cw+’px’});$(window).resize(function() {var cw = $(‘.dummy’).width();$(‘.dummy’).css({‘height’:cw+’px’});});123456用CSS设置.dummy {padding-top: 100%; /* 1:1 aspect ratio */width: 100%;background: #333333;}12345CSS设置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>1234567891011121314151617181920.container {display: inline-block;position: relative;width: 32%;text-align: center;}.container img{width: 100%;height:100%;}12345678910var cw = $(‘.dummy’).width();$(‘.dummy’).css({‘height’:cw+’px’});$(window).resize(function() {var cw = $(‘.dummy’).width();$(‘.dummy’).css({‘height’:cw+’px’});});123456CSS方法<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>1234567891011121314151617181920212223.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%;}12345678910111213通过设置background可以实现。

div包含img的方法没有试验成功，以后继续尝试/————————————-还有一个问题，怎么设置div和img之间的padding，又能保证div宽度是屏幕宽度的三分之一？