开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么getComputedStyle在页面重载后返回滑块宽度的'auto‘？

getComputedStyle是一个用于获取元素的计算样式的方法。它返回一个包含所有计算样式属性的对象，这些属性包括元素的尺寸、颜色、字体等。

在页面重载后，当使用getComputedStyle获取滑块的宽度时返回'auto'的原因可能有以下几个方面：

加载顺序：在页面重载后，浏览器会重新计算和加载页面的各个元素。如果滑块的宽度是通过CSS样式表中的规则来定义的，并且在页面加载时该规则尚未生效，那么在重载后获取滑块宽度时可能会返回'auto'。这是因为在重载后，浏览器还没有完成对CSS样式表的加载和解析，因此无法获取到正确的计算样式。
异步加载：如果滑块的宽度是通过异步加载的方式获取的，例如通过JavaScript动态生成或通过AJAX请求获取，那么在页面重载后立即获取滑块宽度可能会返回'auto'。这是因为在重载后，异步加载的过程可能尚未完成，导致获取到的滑块宽度还没有被正确计算和设置。
渲染延迟：在页面重载后，浏览器可能存在一定的渲染延迟，即使页面已经加载完成，但是元素的计算样式可能还没有被完全计算和应用。在这种情况下，获取滑块宽度可能会返回'auto'，直到浏览器完成渲染并计算出正确的样式。

针对以上情况，可以采取以下措施来解决获取滑块宽度为'auto'的问题：

确保CSS样式表在页面加载时已经生效，可以通过将样式表放在<head>标签中或使用内联样式来确保样式表的加载顺序。
如果滑块的宽度是通过异步加载获取的，可以在获取滑块宽度之前确保异步加载的过程已经完成，可以通过回调函数或Promise等方式来处理异步加载的顺序。
使用延迟加载的方式获取滑块宽度，等待浏览器完成渲染并计算出正确的样式后再进行获取操作。

需要注意的是，以上解决方案仅供参考，具体的实现方式需要根据具体的页面结构和代码逻辑进行调整。

相关搜索:kotlin协程，为什么在添加Log语句后调用await()时，async {}返回延迟返回不同的值为什么TS让我在重载函数声明中返回错误的类型？为什么使用表单元格css样式的页面在相同的宽度比例下显示不同的div宽度？为什么我在php中的返回文件在表单发送后不能工作？为什么我的Jquery "click Function“在页面加载后执行？为什么我的JSON在每个结果后返回空行？为什么我的redux状态在页面刷新时返回到初始值？为什么我的Swagger index.html页面在发布后是空白的？为什么我的代码在提示用户后没有返回所需的输出为什么我的函数在返回后没有终止？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

在Java中为什么不同的返回类型不算方法重载？

doSomething } public void method(Integer id, String name) { // doSomething } } 为什么不同返回类型不算方法重载...：那为什么返回类型不能做为方法签名的一部分呢？...原因其实很简单，试想一下，如果方法的返回类型也作为方法签名的一部分，那么当程序员写了一个代码去调用“重载”的方法时，JVM 就不能分辨要调用哪个方法了，如下代码所示： public class OverloadExample...总结在同一个类中定义了多个同名方法，但每个方法的参数类型或者是参数个数不同就是方法重载。方法重载的典型使用场景是 String 中的 valueOf 方法，它有 9 种实现。...方法返回类型不能作为方法重载的依据，因为它不是方法签名的组成部分。

3.3K1 0

DOM 和 BOM 中的各种宽高属性

element.scrollTop/element.scrollLeft：返回元素在垂直方向或者水平方向上已滚动的距离。...如下图： image.png 可以看出，假如元素在页面滚动条的拖动下向上移动，则元素的 top 会是负值。...image.png jQuery width()/height()：无参时返回元素的 content 的宽度/高度，传参时（数字或者函数）设置元素的 content 的宽度/高度。...scrollLeft()/scrollTop()：水平方向上或者垂直方向上，滑块相对于整个滚动条的位置。对于某个元素，滑块处于初始位置或者无滚动条时，该方法返回 0。...offset() 返回元素相对于 document (左上角为原点)的当前坐标值，因此即使页面向上拖动，坐标值也不变。

1.9K1 0

js基本操作

获取页面标签 // 2、设置操作的激活条件 - 事件 // 3、具体的操作方式 - 内容 | 样式 | 事件 | 文档结构 // 1 let body = document.querySelector...= this.style.backgroundColor; // console.log(bgColor); // 注：在内联和外联中书写的样式称之为计算后样式...// 注：getComputedStyle 能获取计算后样式，也能获取行间式，但是只读 // getComputedStyle(标签, 伪类).样式; bgColor...去除滚动条剩余的全部宽度 let html = document.querySelector('html'); console.log(html.clientWidth); 不去除滚动条剩余的全部宽度...div class="box"> let html = document.querySelector('html'); // 去除滚动条的宽度

4.2K1 2

jQuery源码解析之width()

，某个元素用display:none，将它从页面上去掉了，此时是获取不到它的宽度的 // 如果要获取它的宽度的话，需要隐式地显示它们，比如display:absolute，visible...extra ) { return val; } val = "auto"; } // 通过getComputedStyle检查style属性，并返回可靠的...，但是宽度是像素显示的 //这违反了CSSOM草案规范 //所以以下方法是修复不规范的width属性的 if ( !...拿到该值后，还会继续处理。...时，返回的width是： parseFloat(a.ownerDocument.defaultView.getComputedStyle(a).getPropertyValue('width')) //

3.1K2 0

JavaScript DOM元素尺寸和位置

;//18px、200px、auto PS：通过计算获取元素的大小，无关你是否是行内、内联或者链接，它经过计算后得到的结果返回出来。...如果本身设置大小，它会返回元素的大小，如果本身没有设置，非IE浏览器会返回默认的大小，IE浏览器返回auto。...box.scrollWidth;//200 box.scrollWidth;//200 PS：返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，它会得到计算后的宽度和高度。...box.offsetWidth;//200 box.offsetHeight;//200 PS：返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，他会得到计算后的宽度和高度。...如果四条边宽度不同的话，可以直接通过计算后的样式获取，或者采用以上三组获取元素大小的减法求得。 2.offsetLeft和offsetTop 这组属性可以获取当前元素相对于父元素的位置。

2.7K7 0

【前端芝士树】详解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth

即由外向里是 margin, border, padding, content 2.为什么会有两种不同的盒模型（标准模式和怪异模式）在了解两种不同的盒模型之前，需要先了解一下为什么会产生两种不同的盒模型...因此大部分的DOCTYPE声明将触发严格模式：即依据标准的CSS规则渲染网页。任何新的或未知的DOCTYPE将触发严格模式。一些页面依据怪异模式而写，但是却包含DOCTYPE。...这种情况下各个浏览器依据自己的DOCTYPE规则列表来触发怪异模式。所有IE的触发 —— 在DTD声明前加上HTML注释 <!...，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。...console.log('Dom.style.width:' + dom.style.width); //100px 2.dom.currentStyle.width/height 　　这种方式获取的是在页面渲染完成后的结果

9836 0

js获取元素样式之getComputedStyle方法

习惯了jquery的同学应该都知道获取元素样式的方式可以直接写成(obj).css(style);更方便的获取高度宽度等一些样式可以直接使用(obj).height()和一、 getComputedStyle...返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。...为什么要用这个属性呢，是因为通过document.getElementById(element).style.xxx可以获取元素的样式信息但是对于通过class属性引用的外部样式表就获取不到了。...根据DennisHall的说法，使用defaultView可能一是人们不太乐意在window上专门写个东西，二是让API在Java中也可用不过有个特殊情况，在FireFox3.6上不使用defaultView...，差别在于element.currentStyle返回的是元素当前应用的最终CSS属性值（包括外链CSS文件，页面中嵌入的属性等）。

22.5K3 0

Web浏览器滚动方案一览｜ rAF等

但是，需要注意，在旧版的WebKit内核浏览器(如早期版本的Safari)中，这两个属性返回无效值，我们需要使用document.body来取代。...这两个属性分别返回页面内容区域从文档左上角滚动了多少像素，它们提供了一种跨浏览器兼容的方式来获取当前页面滚动状态。开发人员不必再记住各种浏览器的差异性，只需要调用这两个属性即可简单高效地实现功能。...例如：window.scrollTo({ top: 100, behavior: 'smooth'});scrollTo 方法对整个页面和单个元素都起作用，常用于点击某个按钮后滚动到页面指定位置，或者滚动元素内部内容...如果它增加了（滚动条消失后），那么我们可以在 document.body 中滚动条原来的位置处通过添加 padding，来替代滚动条，这样这个问题就解决了。保持了滚动条冻结前后文档内容宽度相同。...亦或是参考这篇文章：css - 如何解决滚动条scrollbar出现造成的页面宽度被挤压的问题？

1001 0

js动画和css动画_js文件怎么引入html

在做页面中，多数情况下都会遇到页面上做动画效果，我们大部分做动画的时候都是使用框架来做(比如jquery)，这里我介绍下如何让通过原生的js来实现像框架一样的动画效果！...offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的)，并且是已进行过CSS定位的容器元素。...(oAbc,false).width); } 一个空白页面中body的id=”abc”，测试以上代码，IE和Opera弹出“auto”，其它三款浏览器则弹出“***px”。...auto”，而getComputedStyle则返回具体的值”**px”。...(obj,false)[attr]; } } } //offsetWidth获取的是元素实际的宽度(包括边框和内边距) //只要是多物体运动，所有的属性都不能共用 8、链式动画说明：链式动画就是当前动画执行完成后执行下一个动画效果

22.1K2 0

Javascript(2)-js进阶

// screen.width/height表示的是电脑屏幕的宽度和高度分辨率 // screen.availWidth/screen.availHeight:屏幕的宽度和高度...name];获取样式存在兼容性问题【兼容IE9+ 和其他浏览器】 Window.getComputedStyle() 方法给出应用活动样式表后的元素的所有CSS属性的值，并解析这些值可能包含的任何基本计算...onunload 用户退出页面。键盘事件属性/函数名称描述 altKey 返回当事件被触发时，"ALT" 是否被按下。 button 返回当事件被触发时，哪个鼠标按钮被点击。...clientX 返回当事件被触发时，鼠标指针的水平坐标。 clientY 返回当事件被触发时，鼠标指针的垂直坐标。 ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。...metaKey 返回当事件被触发时，"meta" 键是否被按下。 relatedTarget 返回与事件的目标节点相关的节点。 screenX 返回当某个事件被触发时，鼠标指针的水平坐标。

1.4K3 0

第六节盒子模型和盒子模型偏移量

提供的一系列的属性和方法，获取页面中元素的样式信息值 client系列(当前元素的私有属性) clientWidth/clientHeight:内容的宽度/高度+左右/上下填充，（和内容溢出没有关系.../scrollHeight当前页面真实的宽度和高度（所有屏的宽度和高度，是一个约等于的值）不管是哪些属性，也不管是什么浏览器，不管是设置还是获取，想要兼容都写两套获取 document.documentElement...）（无法实现css和html的分离） 2、使用window.getComputedStyle这个方法获取所有经过浏览器计算过的样式（只要当前的元素标签可以在页面中呈现出来，那么它所有的样式都是经过浏览器计算过的...1、首先加上自己本身的左偏移 2、获取自己的父级参照物（xx）把xx的左边框和左偏移加上 3、基于当前的xx向上找父级参照物，找到后依然是累加边框和其左偏移 4、一直找到父级参照物为null，一直找到body...）异步编程：规划做一件事情，但是不是当前立马去执行这件事情，需要等待一定的时间，这样的话，我们不会等着他执行，而是继续执行下面的操作，只有当下面的事情都处理完成了，才会返回头处理之前的事情，如果下面的事情并没有处理完成

9802 0

h5新功能data-*,好好利用，还能做数据双向绑定

window.getComputedStyle 利用window.getComputedStyle方法选择到伪元素，然后利用getPropertyValue方法获取对应的属性的值。...,width等属性在未来都有希望用这个方法更改，然而目前只有content支持该方法，其余的都还是草稿状态，尚未有浏览器支持。...不过再看完后面两种方法后或许你会对这种看法有所改观。这个方法的优点是简单好用且无兼容性问题。...（CSS中先定义的样式总是会被后定义的覆盖就是这个缘故。）...这种方法虽然不是很好，但是有时候却又确确实实是必须的——比如“拖动滑块改变伪元素内文字大小”这个需求。

1.8K4 0

一文彻底搞懂js中的位置计算

' | 'auto' // 平滑滚动还是默认直接滚动 } 复制代码 Element.scrollHeight/scrollWidth Element.scrollHeight 这个只读属性是一个元素内容高度的度量...例如，不论页面是否有垂直/水平滚动，当你点击客户端区域的左上角时，鼠标事件的 clientX/Y 值都将为 0 。...offsetWidth/offsetHeight HTMLElement.offsetWidth/Height 是一个只读属性，返回一个元素的布局宽度/高度。...而offsetWidth/offsetHeight返回元素的布局宽度/高度，包含元素的边框(border)、水平线/垂直线上的内边距(padding)、竖直/水平方向滚动条(scrollbar)（如果存在的话...window.getComputedStyle 用法讲解 Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS

3.7K1 0

Resize Observer 介绍及原理浅析

当「resize」事件发生后，我们往往需要通过调用 getBoundingClientRect 或者 getComputedStyle 来获取此时我们关心的元素大小，以此判断元素是否发生了变化。...关心的盒模型变化时才会触发通知，但实际上通知时会将三种不同盒模型下的具体大小都返回给回调函数，用户无需再次手动获取。...为什么这里提的是「可能」，下面会进行解释。...结合上图，我们假设这样的场景，在监听到「节点1」宽度变化时，设置「子孙节点2」的宽度；而在「节点2」宽度改变时，我们对「节点1」的宽度进行改变，此时可能又会触发「节点1」的监听回调...深度限制可能会使得页面展示不是完全准确的，但是相比于页面UI卡死，这个问题对于用户而言是更好接受的。

2.7K4 0

JS盒子模型

JavaScript中的盒子模型通常指的是HTML元素在页面中的表示和排列方式，由浏览器处理和管理。...盒子模型描述了一个元素在页面布局中所占据的空间，包括元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）。...，不完全准确，在不同浏览器中，因为对内容渲染机制的差异，结果是不一样的，而且我们设置的overflow的值也对最后的结果有影响）scrollWidthscrollHeight获取当前页面真实的宽度和高度...(window.getComputedStyle(element).paddingTop);// 获取元素的外边距const marginTop = parseInt(window.getComputedStyle...(element).marginTop);const marginBottom = parseInt(window.getComputedStyle(element).marginBottom);这些属性可以让你获取元素在页面中所占据的空间大小

1391 0

面试官想知道你多了解position:absolute | 掘金技术征文

一重天绝对定位，top，right，bottom 和 left 属性决定了该元素的最终位置，position:absolute常常和他们配套使用，完成对固定宽度元素的居中效果。...一个元素被设为绝对定位后，其display计算值就变为了block，尽管其表现形式和inline-block类似——包裹内部元素且不超出包含块的特性（网上有些说变为inline-block的其实误人子弟了...计算值是对指定值进行计算后得到的结果，计算值进行的计算通常为将相对值转换成绝对值(如 em 单位或百分比)。应用值是由渲染引擎根据计算值得出实际的布局尺寸，应用到渲染的页面上的结果。...可以通过window.getComputedStyle方法获得应用值。...计算值和应用值的区别：对于不依赖于布局的 CSS 属性 (例如 display, font-size, line-height)计算值与应用值一样，否则就会不一样（例如height:auto，计算值为auto

2192 0

2020年还问position:absolute，玩点花样？

一重天绝对定位，top，right，bottom 和 left 属性决定了该元素的最终位置，position:absolute常常和他们配套使用，完成对固定宽度元素的居中效果。...一个元素被设为绝对定位后，其display计算值就变为了block，尽管其表现形式和inline-block类似——包裹内部元素且不超出包含块的特性（网上有些说变为inline-block的其实误人子弟了...计算值是对指定值进行计算后得到的结果，计算值进行的计算通常为将相对值转换成绝对值(如 em 单位或百分比)。应用值是由渲染引擎根据计算值得出实际的布局尺寸，应用到渲染的页面上的结果。...可以通过window.getComputedStyle方法获得应用值。...计算值和应用值的区别：对于不依赖于布局的 CSS 属性 (例如 display, font-size, line-height)计算值与应用值一样，否则就会不一样（例如height:auto，计算值为auto

991 0

BOM大详解

总结: history：代表页面的切换. 6：通过getComputedStyle来获取宽高 <!...4:1:getComputedStyle只获取content的宽高. 效果： ? 8.通过style属性获取宽高源代码： <!...大总结： 1.getComputedStyle/currentStyle/style 获取的宽高不包括边框和内边距 2.offsetWidth/offsetHeight 获取的宽高包括边框和内边距...+ 内边距宽度 == clientWidth scrollHeight: = 元素高度 + 内边距的高度 == clientHeight* **2.内容超出元素范围时** *scrollWidth...: = 元素宽度 + 内边距宽度 + 超出的宽度 scrollHeight: = 元素高度 + 内边距的高度 + 超出的高度* **3.scrollTop / scrollLeft** 指的是滚动条相对于其顶部的偏移

4632 0

【现代 CSS】标准滚动条控制规范 scrollbar-color 和 scrollbar-width

*/ scrollbar-color: auto; scrollbar-color: dark; scrollbar-color: light; } 在我实测过后，发现实际没有任何浏览器（...中文文档存在一定的滞后性，还是推荐大家直接看英文文档： scrollbar-width设置滚动条粗细了解完 scrollbar-color 后，我们再来看看 scrollbar-width。...这个从名字也很好理解，设置滚动条的宽度。那是否和我们想象的一样，可以任意设置滚动条的宽度，甚至乎，可以定制化的设置滑块和轨道的宽度？...不要说分别设置滑块和轨道的宽度，scrollbar-width 目前甚至不支持接受一个宽度数值。什么意思呢？...: thin; scrollbar-width: none; } scrollbar-width: auto：系统默认的滚动条宽度。

771 0

css中简介盒模型

在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。...2.盒子模型有哪两种标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右) 怪异模式下：一个块的总宽度= width...JS盒模型怎么获取和设置box的内容宽高 IE： dom.currentStyle.width/height 非IE: window.getComputedStyle(dom).width/height...var obj = document.getElementById("box"); var style = null; if (window.getComputedStyle) { style...= window.getComputedStyle(obj, null); // 非IE } else { style = obj.currentStyle; // IE } alert

3453 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭