为什么getComputedStyle在页面重载后返回滑块宽度的'auto‘？
getComputedStyle是一个用于获取元素的计算样式的方法。它返回一个包含所有计算样式属性的对象，这些属性包括元素的尺寸、颜色、字体等。
在页面重载后，当使用getComputedStyle获取滑块的宽度时返回'auto'的原因可能有以下几个方面：
- 加载顺序：在页面重载后，浏览器会重新计算和加载页面的各个元素。如果滑块的宽度是通过CSS样式表中的规则来定义的，并且在页面加载时该规则尚未生效，那么在重载后获取滑块宽度时可能会返回'auto'。这是因为在重载后，浏览器还没有完成对CSS样式表的加载和解析，因此无法获取到正确的计算样式。
- 异步加载：如果滑块的宽度是通过异步加载的方式获取的，例如通过JavaScript动态生成或通过AJAX请求获取，那么在页面重载后立即获取滑块宽度可能会返回'auto'。这是因为在重载后，异步加载的过程可能尚未完成，导致获取到的滑块宽度还没有被正确计算和设置。
- 渲染延迟：在页面重载后，浏览器可能存在一定的渲染延迟，即使页面已经加载完成，但是元素的计算样式可能还没有被完全计算和应用。在这种情况下，获取滑块宽度可能会返回'auto'，直到浏览器完成渲染并计算出正确的样式。
针对以上情况，可以采取以下措施来解决获取滑块宽度为'auto'的问题：
- 确保CSS样式表在页面加载时已经生效，可以通过将样式表放在<head>标签中或使用内联样式来确保样式表的加载顺序。
- 如果滑块的宽度是通过异步加载获取的，可以在获取滑块宽度之前确保异步加载的过程已经完成，可以通过回调函数或Promise等方式来处理异步加载的顺序。
- 使用延迟加载的方式获取滑块宽度，等待浏览器完成渲染并计算出正确的样式后再进行获取操作。
需要注意的是，以上解决方案仅供参考，具体的实现方式需要根据具体的页面结构和代码逻辑进行调整。
相关·内容
1回答
为什么getComputedStyle在页面重载后返回滑块宽度的'auto‘？
javascript、html、css
这里有一个链接：
第一次加载页面时，一切正常(getComputedStyle返回有效值)。但只需尝试通过Ctrl+F5重新加载页面，等待几秒钟，然后通过F5重新加载，您将看到滑块导航不在中心位置。此时，您可以打开浏览器的控制台，看到重新加载后的getComputedStyle (F5)仅返回'auto‘值。为什么会发生这种情况？为什么在</em
浏览 0提问于2017-08-16得票数 2
回答已采纳
2回答
currentStyle与getComputedStyle的火狐问题
javascript、firefox、computed-style
我正在尝试根据元素的CSS规则获取元素的宽度，问题是对于没有设置CSS width值的元素，"getComputedStyle“返回的是像素值，而不是"auto”。在歌剧中，“elem.currentStyle‘’width‘”返回"auto"，但在firefox中，它必须使用"getComputedStyle“返回</em
浏览 24提问于2011-08-29得票数 5
回答已采纳
2回答
计算html模板的实际宽/高
javascript、html
我在js中有html模板，比如：如何在渲染后找到此div的实际宽度？我尝试过window.getComputedStyle(myElement)，它找到了元素，但返回：height: null谢谢。
浏览 1提问于2014-04-13得票数 1
1回答
CSS滑雪板向左移动
html、css、slider
我已经用css创建了一个滑块，但是当我到达最后一个元素时，它会移动到左侧。 display: none;#slider-arrows { width: 80%;#slider-box { width: 300%;#slider-container { margin
浏览 2提问于2016-04-26得票数 1
回答已采纳
2回答
为什么getComputedStyle在元素创建后立即返回像素值的“auto”？
javascript、css、dom
我使用胡子生成一些HTML，并使用insertAdjacentHTML将其放在页面上。然而，如果我试图获得一个像素值的宽度或高度，它继续抛回'auto'。考虑到这可能只是getComputedStyle的一个问题，我尝试使用.getBoundingClientRect和.offsetWidth。两人都返回了0。有没有人对这里发生的事情或如何解决这个问题有任何想法？在插入HTML后，我确实需要像素<
浏览 2提问于2011-12-25得票数 17
回答已采纳
1回答
火狐getComputedStyle返回“自动”
javascript、firefox
这个问题以前有人问过关于“高度”和“宽度”属性，但我没有找到有效的解决办法。
在火狐中，值auto的属性返回使用的值，而不是值auto。但是，window.getComputedStyle(element).getPropertyValue("top")返回的是"auto"而不是像素值。有人知道解决办法吗？Ubuntu 15.04上<
浏览 2提问于2015-11-12得票数 2
回答已采纳
1回答
产品滑块在单击标签时未显示
plugins、bug、listing
只有第一个产品滑块(MPC产品滑块包括在我的主题中)似乎正确地显示在页面加载。当单击其他选项卡时，其他产品滑块似乎不会加载。但是，当我调整浏览器的大小时，它们会弹出。display: block; }
在这里，宽度和高度属性仅在调整屏幕大小时从0更改为宽度:1108 to和高度:331 to。此外，后缩略图从宽度:0 0px到宽度:237 0px。我还尝试了一个W
浏览 0提问于2018-09-16得票数 0
回答已采纳
1回答
区分从getComputedStyle返回的已用值和计算值
javascript、css
状态的MDN文档
我的用例是：
以身体元素为例。浏览器的宽度当前为600px。如果对getComputedStyle元素调用body，则返回的
浏览 0提问于2015-03-18得票数 3
回答已采纳
1回答
getComputedStyle替代品: currentStyle (IE8/7)不工作
javascript、html
我有一个关于currentStyle的问题，我读到的是在IE9支持getComputedStyle之前的修复。我最近做了另一个关于获取多级导航菜单的顶级LI列表的引用的帖子：
this.w =函数( elm ){
var s = (wind
浏览 1提问于2015-04-06得票数 0
2回答
跨浏览器的getComputedStyle()一致性
javascript、microsoft-edge、getcomputedstyle
我需要为一个元素得到一个计算的CSS位置，但是当使用auto而不是一个数字值时，我在浏览器中得到了不一致的结果。.innerText = getComputedStyle(el1).bottom;
el2.innerText =getComputedStyle(el2).bottom; position: sticky;
padding: 20px;
浏览 0提问于2019-05-14得票数 1
8回答
如何使用香草JavaScript找到div的宽度？
javascript、html
如何在不使用像<div>这样的库的情况下，以跨浏览器兼容的方式找到jQuery的当前宽度？
浏览 5提问于2011-01-24得票数 345
回答已采纳
1回答
避免屏幕调整时菜单按钮的闪烁效果
css、flexbox
有一个伪“：后”附加到最后一个列表项目，这将占用剩余的空间，除非这个剩余的空间是低于一定百分比的屏幕大小。它可以工作，但当我调整屏幕大小时，菜单项上会出现闪烁效应。Artificial intelligence asdf</a></li> script.js let width = window.getComputedStyleflex-wrap:wrap;
list-style:no
浏览 0提问于2019-02-11得票数 0
回答已采纳
2回答
在一个页面上有多个相同的Caroufredsel
jquery、carousel
当我需要在一个页面上的多个地方使用这个滑块时，我有问题。
为什么？我有页面是JS菜单与年份，当我点击年份"2005“然后我显示div (通过JQuery重载页面，我不能使用)，在那里我有一些链接，这些链接必须在滑块(CaroufredSel我喜欢)。然后我点击" 2014“，然后我隐藏"div 2005”，并显示"2014“有相同的滑块，但另一个内容(例如-在
浏览 2提问于2014-06-24得票数 0
1回答
用JavaScript获取伪元素属性
javascript、css、pseudo-element
我试图使用JavaScript getComputedStyle读取伪元素的CSS属性然而，返回的值在Chrome中为'px‘，在Firefox和IE中为'%’。有没有一种方法可以在所有浏览器
浏览 5提问于2017-01-10得票数 1
1回答
getComputedStyle在FF3.6中返回auto，有什么变通方法吗？
javascript、dom
我需要对页面中的列进行一些对齐，因此需要亚像素宽度。我使用的内容大致如下：因此，这在最近的FF中工作得很好，但在FF3.6中总是“auto我真的很想让它也能在FF3中工作，因为我们部署的是RHEL6系统，不幸的是，它附带了一个旧的FF。
那么，在较老的壁虎中，<e
浏览 4提问于2012-10-15得票数 0
3回答
D3.js:如何计算任意元素的宽度和高度？
javascript、d3.js
我需要知道SVG中任意g元素的确切宽度和高度，因为一旦用户单击它，我就需要在它周围绘制一个选择标记。
我在互联网上看到的类似于：d3.select("myG").style("width")。问题是元素并不总是有一个显式的width属性集。例如，当我在g中创建一个圆时，它将设置半径(r)而不是宽度。即使我在circle上使用window.getComputedStyle方法，它也会返回"
浏览 0提问于2014-02-24得票数 134
回答已采纳
1回答
如何在Chrome / IE中获得“真”计算的CSS宽度
javascript、html、css、google-chrome
当尝试在vanilla JS中实现一个可调整大小的面板时，当面板上有滚动条时，问题就会出现。我做了这个测试小提琴，令我惊讶的是，面板变得更小，而不是更大，当我增加它的宽度。我建议在JSFiddle这里查看它，这里是，但是这里也有代码。
而不是在元素本身上，因此element.style属性不会有它)。编辑:这也
浏览 1提问于2015-04-09得票数 4
回答已采纳
1回答
js样式不更新
javascript、css
我有一段代码让我抓狂:我在我的网站上有一个水平菜单，当鼠标悬停在其中一个项目上时，会出现一个垂直子菜单。我让它起作用了。因为子菜单项是可变的，所以不可能硬编码它们的宽度。相反，我尝试在mouseover上获取它们的宽度，然后我想将ul的宽度更改为最长项的宽度。(element,null); element
浏览 0提问于2011-06-04得票数 0
回答已采纳
1回答
如何在使用vanilla JS的CSS中将元素的高度或宽度设置为100%或`auto`？
javascript、jquery、css、google-chrome-devtools
如何使用vanilla JS和跨浏览器解决方案确定元素的CSS宽度/高度是否设置为'auto‘或'100%’？Returns: ""
使用getComputedStyle会给出一个单位值。getComputedStyle(document.querySelector(&q
浏览 4提问于2019-05-24得票数 5
1回答
用于解决的CSS样式表
javascript、html、css、screen-resolution
我在制作网站方面很新。我可以读和写一些CSS和HTML以及一点点Javascript。但是我现在发现我的网站有一些问题。如果屏幕分辨率低，如果你想访问我的网站，那么它将切断我的网站的右侧。现在，当我忙于电话的检查和编码时(我只能检查iPhone 5)，我使用了以下代码
<meta name=”viewport” content=”width=device-width, maximum-scale现在，当我有一些其他问题时，我请一些人查看我的网站并修复这些问题，但当
浏览 4提问于2013-10-20得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
