首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用JavaScript确定元素是固定宽度还是百分比宽度

在前端开发中,我们可以使用JavaScript来确定一个元素的宽度是固定宽度还是百分比宽度。以下是一个简单的示例代码:

代码语言:javascript
复制
function checkWidth(element) {
  const width = window.getComputedStyle(element).width;
  if (width.indexOf('%') !== -1) {
    return '百分比宽度';
  } else {
    return '固定宽度';
  }
}

const element = document.getElementById('example');
const result = checkWidth(element);
console.log(result);

在这个示例代码中,我们首先使用window.getComputedStyle()方法获取元素的计算样式,然后检查width属性是否包含%字符。如果包含,则说明元素的宽度是百分比宽度;否则,说明元素的宽度是固定宽度。

需要注意的是,这个示例代码只能检查元素的宽度是否是百分比宽度,而不能检查元素的宽度是否是继承自父元素的宽度。如果需要检查元素的宽度是否是继承自父元素的宽度,则需要使用其他方法来实现。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS 技巧一则 -- 不定宽溢出文本适配滚动

容器定宽,文本不定宽 我们先假设一下,我们的容器的宽度如果固定的,但是不确定每条文本的宽度。...由于在使用 transform: translate() 进行位移的时候,如果使用百分比表示,那么百分比的基准元素元素本身,也就是如果我们 transform: translate(100%, 0),...不定宽文字跑马灯来回滚动展示 -- 父容器定宽,子元素不定宽 父容器不定宽度 当然,还没完。 如果父容器的宽度也是不固定的,或因为者 calc 兼容性问题无法使用上述方法。...100% left: 100% 能够实现向右位移父容器宽度的 100% 使用 margin-left 替换 left 也是一样可以实现的,使用百分比表示的 margin-left 位移的基准也是父元素宽度...所以实际使用中,可能还是需要借助 JavaScript 简单判断,然后通过一个 class 进行控制。

1.8K20

padding实现图片等比例自适应

在传统的固定宽度的布局下,我们会通过给图片设定具体的宽度和高度值,来保证我们的图片占据区域稳固;但是在移动端或者在响应式开发情况下,图片最终展现的宽度很可能确定的,例如手机端的一个通栏广告,iPhone7...下宽度375,iPhone7 Plus下414,还有360等尺寸,此时需要的不是对图片进行固定尺寸设定,而是比例设定。...(0.1515 * (100vw - 2rem)); background-size: cover; } 如果,图片距离两侧的宽度动态不确定的,则,此时calc()也捉襟见肘了,但,恰恰普普通通其貌不扬的...二、CSS百分比padding与宽度自适应图片布局 但是有时候我们的图片不方便作为背景图呈现的,而是内联的,百分比padding也是可以轻松应对的,求套路比较固定的,图片元素外面需要一个固定比例的容器元素...所以对图片高宽进行同时约定还是有必要的,但是同时要保证宽度自适应,似乎有点难度。记住,如果遇到这种需求场景,没有比百分比padding布局更好的做法!

2.7K10
  • 响应式图像

    (美术设计)选择 基于图像格式选择 一、固定宽度图像:基于设备像素比选择   srcset属性列出了浏览器可以选择加载的源图像池,一个由逗号分隔的列表。...2. sizes属性有两个值:第一个媒体条件;第二个源图尺寸值,在特定媒体条件下,此值决定了图片的宽度。需要注意,源图尺寸值不能使用百分比,vw唯一可用的CSS单位。...在这个例子中,我用红色边框包裹html元素,然后给section元素设置背景颜色。 ? 因为这个细微的差别,当使一个元素横跨整个页面的宽度时,最好使用百分比单位而不是视口的宽度。 2....因为用百分比定义的元素的大小由它的父元素决定的,只有父元素也填满整个屏幕的高度时我们才能拥有一个填满整个屏幕的高度的元素。...我们可以用javascript来实现翻动页面的错觉。

    2.5K10

    自适应与响应式的异同

    响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。 当固定宽度与流动宽度结合起来时,自适应布局就是一种响应式设计,而不仅仅是它的一种替代方法。​ 那么如何进行响应式布局呢?...由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度(margin-left:5px)的布局,也不能使用具有绝对宽度(例如:width:200px)的元素,而最好使用百分比宽度width:20%;或者...em才是真正的“相对单位”(百分比嘛,当然相对),而px和pt都是绝对单位(都有固定值)。所以,一般移动终端布局用em比较合适。...remcss3的出现,同时引进新的单位,而rem相对于根元素,这样就意味着,我们只需要在根元素确定一个参考值,在根元素中设置多大的字体,这完全可以根据您自己的需要。...: left; width: 25%; }  float的好处,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

    68030

    移动适配的长度单位

    rem单位 效果:屏幕宽度不同,网页元素尺寸不同(等比缩放) 与px单位或百分比布局对比: px单位绝对单位 百分比布局特点宽度自适应,高度固定 rem单位相对单位 rem单位相对于HTML标签的字号计算结果...等比缩放 实现在不同宽度的设备中,网页元素尺寸等比缩放效果 在工作中,书写代码的尺寸要参照设计稿尺寸,通常设计稿给出的尺寸px,我们需要通过计算来得到rem的值。...像素尺寸转换rem: 1.根据视口宽度,设置不同的HTML标签字号 2.确定设计稿对应的设备的HTML标签字号 查看设计稿宽度确定参考设备宽度(视口宽度) → 确定基准根字号(1/10视口宽度)...注意:浏览器不识别less代码,目前阶段,网页需要引入的还是对应的css文件。 运算:完成px单位到rem单位的转换 加减乘直接书写计算表达式。..../37.5rem 注意:开发中除法计算通常使用小括号。 嵌套:快速生成后代选择器。 注:&表示当前选择器,不生成后代选择器,通常配合伪类或伪元素使用。 变量:存储数据,方便使用和修改。

    1.3K20

    rem不是神农草,治不了移动端百病

    简单来说,总共就二个问题: 宽度确定 高度不确定 下面我们一一说明 宽度确定 目前主流的宽度: 360px, 375px, 414px等,外加一个小尺寸的320px。...于是我们得出第一个结论:既然文字不需要适应各种视窗大小变化,所以单位设置px完全没有问题的。 对于图片而言,我们会面临两种:一种百分比的,一种固定大小的。...于是我们得出第二个结论:图片会根据使用场景或用px,或用%(当然也可以使用更高级的vw) 结合前两个结论,得出第三个结论:如果只考虑宽度的不确定,其实rem完全可以不用。...当然rem还有另一种妙用,就是当做vw的替代品来说,具体参考:关于移动端百分比宽度的几种实现 高度不确定 对于高度不确定,90%的时候我们不关心的,因为有滚动。...现在我们换成rem来解决,首先我们期望的目标文字与图片都使用rem单位,然后只通过media queries改变html元素的font-size大小就可以完成我们需要的结果。

    51420

    rem不是神农草,治不了移动端百病

    简单来说,总共就二个问题: 宽度确定 高度不确定 下面我们一一说明 宽度确定 目前主流的宽度: 360px, 375px, 414px等,外加一个小尺寸的320px。...于是我们得出第一个结论:既然文字不需要适应各种视窗大小变化,所以单位设置px完全没有问题的。 对于图片而言,我们会面临两种:一种百分比的,一种固定大小的。...于是我们得出第二个结论:图片会根据使用场景或用px,或用%(当然也可以使用更高级的vw) 结合前两个结论,得出第三个结论:如果只考虑宽度的不确定,其实rem完全可以不用。...当然rem还有另一种妙用,就是当做vw的替代品来说,具体参考:关于移动端百分比宽度的几种实现 高度不确定 对于高度不确定,90%的时候我们不关心的,因为有滚动。...现在我们换成rem来解决,首先我们期望的目标文字与图片都使用rem单位,然后只通过media queries改变html元素的font-size大小就可以完成我们需要的结果。

    665100

    第118天:移动端开发——视口

    像素网页布局的基础,web开发者凭直觉使用它。 一个像素就是计算机屏幕能显示一特定颜色的最小区域。 实际上,有以下两种像素 设备像素:设备屏幕的物理像素,任何设备的物理像素的数量都是固定的。...我们在开发中,操作的CSS像素,让CSS像素去覆盖设备像素。不过当我们使用CSS和JavaScript的时候,其实并不会在意一个CSS像素跨越了多少个设备像素。...二、三个视口 我们经常在开发中会使用到例如width:35%这样的代码去布局。它表示占用父元素百分比宽度。我们看html文档结构知道最外层的一层html元素。那么html元素的包含块是什么?...这个初始包含块所有CSS百分比宽度推算的根源。(在桌面上,视口的宽度和浏览器窗口的宽度一致)。 1、布局视口 移动端设备如果使用视口的宽度和浏览器窗口宽度一样会导致很丑陋的结果。想象一下。...视觉视口用户正在看到的网站的区域。用户可以通过缩放来操作视觉视口,同时不会影响布局视口。布局视口还是保持在原来的宽度。 看下图说明一下视觉视口区域 ? 如上图,红色箭头之间的区域就是视觉视口的区域。

    94620

    网页布局的几种方式有哪些_做网页建议用哪种布局

    大家好,又见面了,我你们的朋友全栈君 固定布局   为网页设置一个固定宽度,通常以px做为长度单位,常见于PC端网页。   ...缺点:因为宽度使用%百分比定义,但是高度和文字大小等大都是用px来固定,所以在大屏幕下显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样,显示非常不协调 栅格化布局   将网页宽度人为的划分成均等的长度...同自适应布局一样,在书写 CSS 样式时,元素宽度不能使用绝对宽度,而要使用相对大小。   Media Queries 响应式设计的核心,它根据条件告诉浏览器如何为指定视图宽度渲染页面。...在优秀的响应范围设计下可以给适配范围内的设备最好的体验,在同一个设备下实际还是固定的布局。但媒体查询有限的,也就是可以枚举出来的,只能适应主流的宽高。...弹性布局(rem/em布局)   弹性布局跟流布局很像,网页宽度固定使用 em 或 rem 单位进行相对布局,避免了使用像素 px 布局在高分辨率下几乎无法辨识的缺点,相对%百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示

    3K20

    08-移动端开发教程-移动端适配方案

    常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值:根据页面的dpr动态改变...百分比固定高度布局方案 此方案的前提设置屏幕为理想视口,然后通过水平百分比布局或者弹性布局,垂直方向一般用固定像素。 优点:布局快速简单方便、在移动设备中水平表现良好差异不大。...2.1 横向百分比 + 纵向高度固定 首先看案例: 拉勾网移动端首页顶部的logo区域,不管如何变化浏览器的宽度,高度不变化,宽度自适应。 ?...3. rem布局方式 remcss3中新增加的长度单位,之前我们接触过em单位,em表示1em代表1个字体的宽度。而rem元素字体的大小,在网页中也就是设置的html根元素的字体大小。...比如: 头像在不同设备上一般都会设置固定像素的大小 宽度可能超过50%的盒子尽量用百分比或者弹性盒子布局 高度和宽度需要同时根据屏幕自动缩放的时候,推荐使用rem布局 5.

    3K60

    08-移动端开发教程-移动端适配方案

    常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值:根据页面的dpr动态改变 Rem...百分比固定高度布局方案 此方案的前提设置屏幕为理想视口,然后通过水平百分比布局或者弹性布局,垂直方向一般用固定像素。 优点:布局快速简单方便、在移动设备中水平表现良好差异不大。...2.1 横向百分比 + 纵向高度固定 首先看案例: 拉勾网移动端首页顶部的logo区域,不管如何变化浏览器的宽度,高度不变化,宽度自适应。...3. rem布局方式 remcss3中新增加的长度单位,之前我们接触过em单位,em表示1em代表1个字体的宽度。而rem元素字体的大小,在网页中也就是设置的html根元素的字体大小。...比如: 头像在不同设备上一般都会设置固定像素的大小 宽度可能超过50%的盒子尽量用百分比或者弹性盒子布局 高度和宽度需要同时根据屏幕自动缩放的时候,推荐使用rem布局 5.

    3.5K100

    5个实用的CSS技巧

    ❝CSS aspect-ratio属性可以明确元素的高宽比例,日后一定是一个高频使用的CSS属性。...❞ 在过去,想要让元素等比例缩放,两种方式: 百分比padding,详见:“CSS百分比padding实现比例固定图片自适应布局”vw单位,例如: .box { width: 50vw; height...在传统的固定宽度的布局下,我们会通过给图片设定具体的宽度和高度值,来保证我们的图片占据区域稳固;但是在移动端或者在响应式开发情况下,图片最终展现的宽度很可能确定的,例如手机端的一个通栏广告,iPhone7...下宽度375,iPhone7 Plus下414,还有360等尺寸,此时需要的不是对图片进行固定尺寸设定,而是比例设定`。...❝banner图可能按照比例设置的,这时候如何按照比例固定图片呢,利用padding来做,因为padding的百分比参照宽度的 ❞ Scss variables and Mixins ❝mixin可以让你制作一些你想在整个网站上重复使用

    63620

    图片横向等高瀑布流,每行占满,限制行数 的实现

    我们都知道  padding-top 的百分比基于父元素宽度来计算的,根据盒模型,一般这种计算方式是为了获取固定宽高比 当父元素宽度,但高度为0时,整体高度则由padding-top值来撑开,...则父元素就有了一个设定的宽高比, 同时我们将子元素(这里图片)position值设置为absolute,宽高占满父元素,则子元素图片也有了一定的宽高比,实现按比例的图片缩放 来看看对应的样式设置 body...* baseHeight / h, height: h, // padding-top的百分比,用以基于父元素宽度设置该元素的高度...直接取 图片宽度w值,就会出现一行中图片高度不一致的情况 因为最终的图片高度即为容器的高度,而容器的高度由容器宽度决定的(注意这里的paddingTop值已经确定),而容器宽度就是由这里的width来决定的...width: w * baseHeight / h, 94 height: h, 95 // padding-top的百分比,用以基于父元素宽度设置该元素的高度

    2K60

    Android开发人员初识前端

    元素宽度在不设置的情况下,它本身父容器的100%(和父元素宽度一致),除非设定一个宽度。...border-width(边框宽度)中的宽度也可以设置为: thin | medium | thick(但不是很常用),最常还是用象素(px)。 4.5、宽度和高度(width,height) ?...但是在网页上局部使用层布局还是有其方便之处的。...层模型有三种形式的定位来让html元素在网页中精确定位: (1)、绝对定位(position:absolute) position:absolute这条语句的作用将元素从文档流中拖出来,然后使用left...由于视图本身固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响

    2.2K30

    vw, vh视窗宽高单位的使用

    因此,vw单位用做宽度自适应的布局,完全是吃力不讨好得显摆! 我们需要想的其他一些只能vw, vh才能完成的应用场景,这就是下面依次要展示的内容~~ 五、场景之:元素的尺寸限制 ?...其目前不支持vw, vh单位的啊!? 原因就在于,覆盖层为固定定位(fixed)元素(绝对定位(absolute)元素也如此)。...拖动range控件,可以看到图片尺寸无论怎样变,弹框总是居中的——纯CSS实现,没有JavaScript的计算与定位,您有兴趣可以研究研究的~~ 正如上面所提到的,某些情况下,vw, vh所产生的效果与百分比...如果只借助CSS,这种效果绝对定位实现不了的。因为其top值动态的(100%, 200%, 300% …),必须借助JavaScript才能实现。...不过,用来做个演示文档,或是分享展示工具之类,还是很OK的! demo页面的宽高按照标准纸张的21:29.7的比例制定,因此,所有单位值都是使用的vh单位。

    2.5K10

    冷门布局方法 tabel-cell 的可行性研究

    小结: 不要与 float:left; position:absolute; 一起使用。 可以实现大小不固定元素的垂直居中。 margin 设置无效,响应 padding 设置。...对高度和宽度高度敏感。 不要对 display:table-cell 使用百分比设置宽度和高度。 下面介绍几个 table-cell 的应用: 1....使用 table-cell 后,不需要写百分比宽度,也不需要清除小块间的间隙。而且添加额外项时,会自动平均分配宽度。 5....诡异的百分比宽高 使用 table-cell 有一个让人很抓狂的地方,那就是他的宽高不能使用百分比设置的,具体的原因我一直没有找到,只能理解为这是这个属性的特性。希望有知道的老铁告知一声。...在其前面有其他元素时,其宽度可以按照 display:inline-block 的元素来计算,也就是宽度会小于等于其百分比计算值的宽度的 * 在父容器未设置 table时,width 的百分比值可以理解为内容区宽度加上

    56920

    布局常用解决方案对比(媒体查询、百分比、rem和vwvh)

    百分比的具体分析 (1)子元素height和width的百分比元素的height或width中使用百分比相对于子元素的直接父元素,width相对于父元素的width,height相对于父元素的height...(4)margin 跟padding一样,margin也是如此,子元素的margin如果设置成百分比,不论垂直方向还是水平方向,都相对于直接父元素的width。这里就不具体举例。...比如我们要实现一个固定长宽比的长方形,比如要实现一个长宽比为4:3的长方形,我们可以根据padding属性来实现,因为padding不管垂直方向还是水平方向,百分比单位都相对于父元素宽度,因此我们可以设置...百分比单位缺点 从上述对于百分比单位的介绍我们很容易看出如果全部使用百分比单位来实现响应式的布局,有明显的以下两个缺点: (1)计算困难,如果我们要定义一个元素宽度和高度,按照设计稿,必须换算成百分比单位...比如width和height相对于父元素的width和height,而margin、padding不管垂直还是水平方向都相对比父元素宽度、border-radius则是相对于元素自身等等,造成我们使用百分比单位容易使布局问题变得复杂

    1.9K40

    H5活动宣传页通用布局技术解决方案

    发光地球水平铺满 这里将采用图片宽高比的方法来解决这个问题,可以参考我之前的文章: css中如何做到容器按比例缩放 移动端重构实战系列6——icon与图片 核心思想还是利用padding的百分比单位计算是基于元素宽度...这里先根据实际内容分两种情况,第一种固定宽度的内容,内容宽度小于320px的;还有一种内容大于320px甚至大于360px的,所以就需要考虑窄屏时候的缩放。...固定宽度的内容 先把所有元素放在一个容器中,对这个容器进行垂直居中定位,水平全屏。里面实际元素的定位,则根据这个容器进行。...而元素的动画,因为我们元素的样式没有使用到transform,所以可以放心使用animate.css动画库 可变宽度的内容 如果元素宽度为可变的,则有如下办法可使用: 通过media queries来对某个范围设置一个固定宽度...,于是又回到了上面的固定宽度 通过计算得到其宽度与视窗宽度百分比,设置该元素宽度百分比单位,如果内容img引入的图片,则高度自动变化,如果bg图片,则高度则采用上面的容器宽高比的方式来设置,且设置

    1.3K10

    H5活动宣传页通用布局技术解决方案

    发光地球水平铺满 这里将采用图片宽高比的方法来解决这个问题,可以参考我之前的文章: css中如何做到容器按比例缩放 移动端重构实战系列6——icon与图片 核心思想还是利用padding的百分比单位计算是基于元素宽度...这里先根据实际内容分两种情况,第一种固定宽度的内容,内容宽度小于320px的;还有一种内容大于320px甚至大于360px的,所以就需要考虑窄屏时候的缩放。...固定宽度的内容 先把所有元素放在一个容器中,对这个容器进行垂直居中定位,水平全屏。里面实际元素的定位,则根据这个容器进行。...而元素的动画,因为我们元素的样式没有使用到transform,所以可以放心使用animate.css动画库 可变宽度的内容 如果元素宽度为可变的,则有如下办法可使用: 通过media queries来对某个范围设置一个固定宽度...,于是又回到了上面的固定宽度 通过计算得到其宽度与视窗宽度百分比,设置该元素宽度百分比单位,如果内容img引入的图片,则高度自动变化,如果bg图片,则高度则采用上面的容器宽高比的方式来设置,且设置

    1.7K50

    静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

    【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】 2、设计方法:使用%百分比定义宽度,高度大都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率...因为宽度使用%百分比定义,但是高度和文字大小等大都是用px来固定,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样(即,这些东西无法变得“流式”),显示非常不协调...,都是检测设备,根据不同的设备采用不同的css,而且css都是采用的百分比的,而不是固定宽度,不同点响应式的模板在不同的设备上看上去不一样的,会随着设备的改变而改变展示样式,而自适应不会,所有的设备看起来都是一套的模板...(特定屏幕尺寸下,html元素的font-size应当设置为何值,使用这个方案时设计师和程序员需要反复考虑后确定的,以下试举一段相关的CSS媒体查询代码),即可自动改变所有用rem定义尺寸的元素的大小...rem布局:改变浏览器宽度,页面所有元素的高宽都等比例缩放,也就是大屏幕下导航横的,小屏幕下还是横的只不过变小了。

    10.4K33
    领券