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

   2023-04-11 互联网0
核心提示:项目中有时候会遇到这个问题:一行有3个div,希望这3个div平分屏幕宽度,并且高度等于宽度。 第一个问题:平分屏幕宽度 可以对div设置百分比宽度,而不是直接用px宽度,这里用到了响应式设计的思想,可以参考这篇文章:自适应网页设计(Res

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

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

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

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

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

先看下html代码

  • some text

  • some text

  • some text

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%;

width: 100%;

background: #333333;

}

1 2 3 4 5

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

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

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

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

  • some text

  • some text

  • some text

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方法

  • some text

  • some text

  • some text

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%;

width: 100%;

background:url(images/test_3.wf) 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宽度是屏幕宽度的三分之一?

 
标签: 宽度 高度 属性
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与爱美生活网(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • 图形的旋转ppt(PPT旋转切换教程)
    图形的旋转ppt(PPT旋转切换教程)
    图形的旋转ppt(PPT旋转切换教程)今天给大家介绍的内容是PPT图片旋转切换,制作和设置幻灯片之间切换过程的旋转动画,首先看一下静态、动态效果图静态效果图动态效果图第一步,插入图片,从本地素材选择几张图片插入Ctrl+A 全选,然后按住C
  • 胎儿34周侧脑室宽度多少正常
    胎儿34周侧脑室宽度多少正常
    胎儿34周侧脑室应低于1厘米,轻微1至1.5厘米,1.5厘米或以上是异常。脑积水是指脑室系统中脑脊液的过度积聚,侧脑室系统的扩张,压力增加和心室肥大。一般来说,侧脑室三角区域扩大1.5厘米,心室扩大程度越宽越重。
  • 哈弗H2的宽度是多少米数(哈弗宽度车型考验)
    哈弗H2的宽度是多少米数(哈弗宽度车型考验)
    哈弗H2的宽度是1.814米,即1814毫米,相对于一般的起车来说,宽度略宽。哈弗H2是长城汽车旗下哈弗品牌推出的一款小型SUV,其长宽高分别为4330毫米,1815毫米,1700毫米的车身尺寸非常接近紧凑型SUV。在当今SUV车型日渐进入
  • bootstrap遮罩层(bootstrap底部导航栏)
    bootstrap遮罩层(bootstrap底部导航栏)
    互联网时代的到来,网络界面不断地优化,不断地追求美感。包括各种各样的网页设计方法,包括幽灵按钮、更强调字体、视频背景、卡片式设计、扁平化以及响应式设计,为了更加便于开发前端页面,前端框架应运而生,其中Bootstrap是最有名的一个。 一开
  • 文字的宽度因子输入多少(宽度文字因子选择)
    文字的宽度因子输入多少(宽度文字因子选择)
    1、文字的宽度因子是1。2、首先我们在工具栏中点开特性按钮。3、然后选择要调整的字体。如果需要调整多个就多选,也可以用批量选择。选择后可以在文字特性中看到文字的宽度因子是1。4、1代表100%,我们要调整字体的宽度,如果需要变窄就输入小于1
  • 内联元素与块级元素分别有哪些(元素内联都是宽度)
    内联元素与块级元素分别有哪些(元素内联都是宽
    块级元素:顾名思义就是以块显示的元素,高度宽度都是可以设置的。比如我们常用的、、默认状态下都是属于块级元素。块级元素比较霸道,默认状态下每次都占据一整个行,后面的内容也必须再新起一行显示。当然非块级元素也可以通过css的display:bl
  • 集成灶与分体灶的优缺点(家用集成灶的优缺点)
    集成灶与分体灶的优缺点(家用集成灶的优缺点)
    1050mm之间。而集成灶之因而称为集成”灶,抽油烟机。 欢迎大家给意见?。当然更多要看市场消费者的需求了?整体搭配上,不呛人,其占地空间基本与宽度相当。1050mm之间。 像分体灶最不好的就是占用厨房的空间,占地方。 又称下排式油烟机
  • CAD软件中直线和多段线的区别
    CAD软件中直线和多段线的区别
    下面我们主要来详细讲解在CAD绘图软件中直线和多段线的区别,通过学习来了解两条线的定义。工具/原料AutoCAD绘图软件方法/步骤1打开CAD软件,通过绘制一条直线和一条多段线来进行查看。2长度等其他参考项均不定,随意绘制,绘制结果。3首先
  • jpg格式下图片宽度高度怎么调
    jpg格式下图片宽度高度怎么调
    最常用的有两种方法。方法一:打开图片,图像—图像大小,取消“约束比例”前面的勾,直接在高度和宽度里面输入你要的数值即可。但这种调整的话,图片有可能会变形。方法二:按你最终的高度和宽度的要求新建一个文档,把要调整和图片拖进来,按快捷键CTRL
  • 当基坑或沟槽宽度小于6m,且降水深度不超过5m.可采用的布置是()。
    当基坑或沟槽宽度小于6m,且降水深度不超过5m.
    关于"当基坑或沟槽宽度小于6m,且降水深度不超过5m.可采用的布置是()。"的答案很多朋友不是很清楚,接下来小编就为介绍一下改题答案吧。当基坑或沟槽宽度小于6m,且降水深度不超过5m.可采用的布置是()。A.单排井点B.双排井点C.环形井点
    02-19
点击排行