.clientwidth在Chrome中返回0
.clientWidth是一个DOM属性，用于获取元素的可见宽度，即元素内容的宽度加上内边距（padding），但不包括边框（border）、外边距（margin）和滚动条的宽度。
在Chrome浏览器中，当使用.clientWidth获取元素的可见宽度时返回0的情况可能有以下几种原因：
- 元素尚未加载完全：如果在DOM加载完成之前尝试获取元素的可见宽度，可能会返回0。可以通过确保在获取.clientWidth之前等待DOM加载完成或使用window.onload事件来解决这个问题。
- 元素被隐藏或不可见：如果元素的CSS样式设置为display: none;或visibility: hidden;，那么.clientWidth将返回0。在这种情况下，需要确保元素可见后再获取其可见宽度。
- 元素没有设置宽度：如果元素没有显式设置宽度或者宽度设置为auto，那么.clientWidth将返回0。可以通过为元素设置具体的宽度值来解决这个问题。
- 元素的内容为空：如果元素没有包含任何内容，.clientWidth将返回0。可以通过在元素中添加内容或者设置合适的宽度来解决这个问题。
总结起来，.clientWidth返回0可能是因为元素尚未加载完全、元素被隐藏或不可见、元素没有设置宽度或者元素的内容为空。需要根据具体情况进行相应的处理。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mps
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse
相关·内容
如何确定自动大小元素(未指定的width**)?** )的宽度
例如，我需要确定span元素的宽度。
以下内容不起作用：
getElementsByTagName('span')[0].clientWidth;
getElementsByTagName('span')[0].getBoundingClientRect().width;
getElementsByTagName('span')[0].offsetWidth;
当查看/ computed选项卡时，图表显示“自动x自动”。
Chrome 49.0.2623.87m bug
没有框架。
浏览 2提问于2016-03-17得票数 1
回答已采纳
我有这样的代码：
window.addEventListener("orientationchange", orientation);
但它不是在运行orientation() 10.3的iPhone SE上启动，而是在运行Android5.1的Moto上运行。
我需要它来更新取决于屏幕宽度的东西。我让它使用window.innerWidth和screen.width，如果它是未定义的(浏览器的不同)。
我的orientation()如下：
cpr = Math.floor(window.innerWidth/100) - 3;
if (navigator.userAgent.
浏览 3提问于2017-04-16得票数 1
回答已采纳
在大多数浏览器中，以下方法都是可行的。
window.onload = function(){
console.log( document.getElementById('svgElm').getBoundingClientRect().width );
};
这是一个。如果你在Google Chrome中尝试，控制台将输出200。但是，FireFox返回0。
浏览 1提问于2012-10-29得票数 18
回答已采纳
我试图在Javascript中做一个简单的标记，并且需要获得 innerDIV的全部内容宽度如下：
<div id="container" style="width: 100%; overflow: hidden;">
<div id="innerDiv" style="direction: rtl; white-space: nowrap; overflow: visible; position: relative;">
very long ... text
</di
浏览 3提问于2013-02-02得票数 3
关于window.innerWidth和document.documentElement.clientWidth，
Webkit (Chrome / Safari)声称innerWidth比clientWidth小。
三叉戟和普雷托声称innerWidth比clientWidth大。
壁虎声称innerWidth和clientWidth一样大。
的正确行为是什么 W3C (或silimar的“权威”)？
测试脚本() (在上)：
setInterval(function() {
var inner_w = window.innerWidth;
var inner
浏览 5提问于2011-08-04得票数 55
3回答
我最近读了很多关于响应式设计的文章，并试图理解最佳实践。我看到的是内容驱动的断点，而不是特定于设备的断点。
真正有用的是，在调整浏览器大小以获得特定值时，获得浏览器的确切宽度(以像素为单位)。我在chrome扩展上添加了“浏览器宽度”扩展，这似乎正是我所需要的。然而，经过一些测试后，“浏览器宽度”给出的值大约宽了20px。
还有没有别的东西可以让我得到我想要的东西？
浏览 2提问于2015-09-09得票数 2
在用document.createElement创建元素树和用something.appendChild放置元素树之后，有没有一种健壮的方法可以立即确定元素树的宽度？Element的offsetWidth或getBoundingClientRect在火狐和IE上运行良好，但在谷歌浏览器上就不行了。它只适用于setTimeout，但不适用于零超时。200毫秒通常是这样做的。我在某处读到，访问offsetWidth会触发回流，但在Google Chrome v47中不会。也许它与这个bug有关：。
浏览 0提问于2015-12-09得票数 0
当我在IE的任何版本中查看我正在工作的站点时，我得到了一条done with errors消息，唯一能加载的似乎就是背景。我真的不确定如何修复这个错误，我甚至不确定这个错误是什么意思。
错误是第117行上的无效参数。
它在Firefox、Safari和Chrome上运行良好。
这是网址：
浏览 0提问于2010-08-10得票数 1
无法在fifefox浏览器中水平滚动(在Chrome..)
Fifefox version :45
Node :v6.9.4
Protractor : 5.0.0
browser.actions().mouseMove(element.all(by.binding('labels.QUANTITY')).get(0)).perform();
如果有任何想法，请与我分享。
浏览 16提问于2017-02-06得票数 1
当$(window).width() == 768时，执行一个alert()。但在Chrome DevTools中，这种情况实际上发生在宽度为786 is时。为什么和如何使我的JS火灾在768 to而不是786？
浏览 2提问于2017-03-28得票数 1
回答已采纳
我的标记中有一个图像字段，我正在使用javascript设置它的源。我需要它的高度和宽度。为此，我使用了image.height()和image.width()方法。它可以在it浏览器中正常工作，但不能在chrome中运行，我尝试过image.height和image.width方法，但没有得到任何值。我也尝试过将prop方法更改为attr来设置图像src，但它也给了我相同的结果。我在这里粘贴我的代码。 function new()
{
timg = new Image();
timg.src=fpath;
} 我在另一个方法中调用它。 function Size(timg) {
浏览 15提问于2019-03-18得票数 0
当我用reactjs编写web应用程序时，我想在目标div容器中创建视频播放器。
因此，我在'componentDidMount‘函数中编写代码，如下所示：
componentDidMount(){
const box = document.getElementById('video-box');
//use the ThirdPartyObject player API to create the player
player = ThirdPartyObject('#video-box').videoPlayer({
浏览 0提问于2017-02-28得票数 1
我试着解决这个问题已经有些日子了，我试着用我自己的对象来替换全局对象，以减少其他脚本(用户脚本，chrome扩展……这类东西)。然而，由于某些原因，我无法让事情正常工作。我尝试使用JSLint、Google Chrome中包含的开发人员工具、Firebug和IE8中集成的schript调试器进行了一些调试，但没有错误解释为什么它在我尝试过的任何浏览器上都不起作用。
我试过IE 8，Google Chrome 10.0.612.3 dev，Firefox 3.6.13，Safari 5.0.3和Opera 11。
所以..。代码如下：
HTML：
<!DOCTYPE HTML>
&l
浏览 2提问于2011-01-04得票数 0
回答已采纳
如果没有在CSS中设置元素宽度属性，那么如何获得元素宽度？如果我设置了宽度，它就能工作，但是如果我不设置，那么宽度只是0，即使我可以看到它不是在使用调试器检查之后。
let width = this.htmlElement.clientWidth;
HTML
<label [model]="foobar">0</label>
浏览 1提问于2017-07-22得票数 0
回答已采纳
我有全屏网站。当我点击我的页面时，图像直接调整全屏大小。它可以在IE 9-10，Chrome，Firefox上运行。但是不要在IE8上工作。
我的JS代码：
$(window).resize(function () {
$("#backgrounds img").each(function (k, v) {
$backgroundImg = $(this);
windowWidth = window.innerWidth
windowHeight = window.innerHeight
imageWi
浏览 0提问于2013-11-14得票数 0
正如我所知，safari和chrome都是基于webkit的浏览器，但是当我使用getComputedStyle时，它看起来就不一样了。Chrome，IE，FF都是回音‘50 FF’，而safari回声是'10%‘。这对工作真的很不方便。这是个狩猎虫还是我犯了个错误？
在Safari中，win V5.1.7和is 6/7的演示测试是一个演示：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documen
浏览 5提问于2014-02-26得票数 0
回答已采纳
1回答
我试着把一个div放在一个完整页面的canvas.Works上面，这在Chrome中很棒，但是在火狐和ie9中它变得'kaput‘了。
以下是代码链接(在firefox chrome和ie9中尝试过)，似乎只有chrome可以工作；
浏览 2提问于2012-10-13得票数 0
回答已采纳
2回答
嗨,
谁能告诉我如何获得实际的视口高度？如果我使用window.innerHeight或$(window).height() (jquery)，我会得到一个看起来考虑到浏览器chrome的值。我需要实际视口的高度。当我使用web dev工具栏(火狐)中的标尺插件测量视区高度时，该值与window.innerHeight提供给我的值不同。
浏览 2提问于2011-02-02得票数 1
1回答
我对chrome应用程序编程和stackoverflow是个新手。
我有一个简单的chrome应用程序，在其中我想要嵌入多个网站到单独的网页视图，自动缩放取决于用户有多大的应用程序窗口，但也保持每个web视图的比例。这是这样的，无论屏幕大小如何，应用程序都会在所有内容显示上显示。
我可以用下面的代码让它为一个网页视图工作，但是我不知道如何嵌入一个以上的网站。
该图显示了我的理想场景。理想化：
manifest.json { "name"："Hello World!"，"description"：“我的第一个Chrome应用。”，"v
浏览 11提问于2017-03-01得票数 0
回答已采纳
2回答
媒体查询不能正常工作
、、、、
我正在尝试使用媒体查询来设置规则：
@media screen and (min-width: 1920px){
#dados_contato_rodape p{
font-size: 5.5em;
border: 1px solid yellow;
}
}
但这种格式仅适用于屏幕宽度为1930px或更大的情况(在Chrome的插件响应工具中测试)。
我的viewport标签是：
<meta name = "viewport" content = "width=device-width, maximum-scale
浏览 1提问于2013-05-01得票数 0
我有以下代码
img = document.getElementById('image'); // which is an <img> element
if (img.width > 0) {
// I get here in Chrome, width is correct
} else {
// I get here in Safari, width is 0
}
为什么Safari中的width属性是0，我如何解决这个问题？
浏览 5提问于2015-08-09得票数 0
回答已采纳
我正在编写一个javascript函数，它等待所有的图片都加载到网页上，然后修改它们的宽度以将它们放入一个框中。在Chrome上，它就像一个护身符(在图片加载之前，clientWidth是0)，但在火狐上，它会立即变成一个很小的数字(在我的例子中是24，而不是~700)，所以实际的缩小部分发生在图片加载之前(所以它保持在相同的大小)。有什么好的主意吗？
function shrink() {
var images = document.getElementsByTagName("img");
var interval = se
浏览 1提问于2011-12-23得票数 0
回答已采纳
1回答
我不能在firefox上运行这个可视化，而我可以在Chrome甚至Edge上运行这个可视化：
由于我很受它的启发并想分析它- -我是d3.js -的初学者，这种可视化并不能在所有浏览器上呈现，这对我的方法有点牵强。。
有人能解释一下吗？这个问题能解决吗？谢谢大家。
浏览 1提问于2018-05-29得票数 0
我正在尝试访问整个页面的高度(包括滚动)。在chrome中，document.body.scrollHeight可以做到这一点。在firefox中，这不起作用...firefox中的等价物是什么？
浏览 2提问于2012-01-14得票数 7
大家好，下面的脚本在chrome和火狐上运行得很好，但在IE11上就不行。有什么解决方案吗？
window.onscroll = function (i)
{
window.innerHeight + window.scrollY >= document.body.offsetHeight ?
$("#str").removeClass("str_one") : $("#str").addClass("str_one")
};
浏览 1提问于2018-01-25得票数 0
我试图在表中找到连续的<td>元素的宽度。
$("tbody > tr")[0]
这将返回控制台中看起来类似HTML的对象。我不知道这是什么。
typeof($("tbody > tr")[0])
这将返回"object"，这也无济于事。
我担心如果我严格地处理这个对象，我将无法解析css值。这个对象是什么?我应该如何找到每个nth td元素在table的第一个tr中的宽度？
编辑
我正在试图找出td的宽度。我不能瞄准$("tbody > tr")[0][0].clientWidth，因为那不是数组。
浏览 3提问于2019-11-15得票数 0
回答已采纳
1回答
了解响应设计的视口宽度
、、、
在阅读了大量关于browser viewport width问题的文章之后，我总结说，如果我理解了这个概念，我就试一试。
下面我使用了javascript :这个脚本打印“您的视口宽度是WidthxHeight”
元素1:在1920年x 1080分辨率下，HP x2301屏幕没有任何滚动条: JS打印:您的视口宽度为1920x955。
元素2:在1920年x 1080分辨率下，HP x2301屏幕上有滚动条(我增加了大量lorem Ipsum字符串段落的页面高度)：JS打印:您的视口宽度为1920x955。
Element3:在Chrome，我查看了element1视图和element2视图。
浏览 0提问于2014-01-23得票数 0
回答已采纳
我有这个控制，并试图得到offsetWidth，clientWidth和scrollWidth..。
<span class="label-block" style="height: 19px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">
<label for="ctl00_Form_PlaceHolder_chkIsAnnualSelfInsuranceRenewalCertificaterequired" id="tid"
浏览 7提问于2014-11-12得票数 4
回答已采纳
对于我的自适应网站，我使用viewport元标签强制设备以“首选”屏幕分辨率显示页面(不是实际的设备分辨率，而是初始规模为1.0的“最小”分辨率)。
Viewport元标签：
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
这似乎在所有设备上都很有效，但是，在移动Chrome上，有时在IOS设备上，首次/非缓存访问并不能立即检测到设备的“首选”分辨率，而是与实际的屏幕分辨率进行通信。
浏览 5提问于2014-10-22得票数 3
回答已采纳
我试图让Browser Viewport bay使用以下代码将Javascript变量传递给PHP：
第一代码
<?php
if (isset($_GET['width']) AND isset($_GET['height'])) {
// output the geometry variables
echo "Screen width is: ". $_GET['width'] ."<br />\n";
echo "Screen height is: ". $_GET
浏览 3提问于2012-04-30得票数 1
回答已采纳
1回答
在我将Google更新到最新版本(30.0.1599.69)之后，高海图表现得很奇怪。我运行的是jQuery版本1.4.2和High曲线图2.1.6，它在所有其他浏览器中都运行得很好，在30.0.1599.69之前的版本也是如此。
在Chrome诉30.0.1599.69中：
它应该是什么样的：
我尝试过几个版本的jQuery，并尝试了更新最新版本的高级图表，但这不起作用，控制台日志中没有错误。
浏览 3提问于2013-10-10得票数 1
回答已采纳
我试图修复一个错误，我的BG不会出现在IE中。我被困在如何修理它上了。
BG问题
这是我实现背景图像的代码。我用一种纹理来显示支持更大分辨率的屏幕。
body
{
margin: 0px;
padding: 0px;
background-image: url("./web_elements/bg.png"), url("./web_elements/tex2.jpg");
background-repeat: no-repeat,repeat;
background-position:top center,0 0;
}
浏览 3提问于2014-01-29得票数 0
回答已采纳
在Jquery中，我知道您可以移动滚动条的起始位置。对于纯javascript来说，这是可能的吗？为了澄清，当用户加载页面时，我只是希望水平滚动条开始向右滚动，而不是从左侧开始。如果有跨浏览器的问题，我特别关注Chrome的工作。
浏览 3提问于2014-12-24得票数 1
它看起来像chrome中的：
$(window).width()
当存在滚动条时，与CSS3介质查询不匹配。没有滚动条，它可以很好地匹配。
有没有人知道附近有什么好工作？
下面是示例：
使你的浏览器，大约600px宽，然后拖动到550px宽。然后切换滚动条。我在用chrome Version 33.0.1750.152
浏览 0提问于2014-03-28得票数 0
谁能指出为什么.clientWidth在Chrome，IE中返回0，而在火狐中运行正常？
下面是我的代码：
const sliderRowItems = document.querySelectorAll(".slider-row img");
const size = sliderRowItems[0].clientWidth;
<div class="slider-row">
<img class="lastSlide" src="/images/img5.jpg" alt=""&g
浏览 14提问于2020-03-01得票数 0
我正在尝试获取浏览器的视区大小。
当页面初始加载时(在jQuery(function() { .. });)中，两者都显示正确的值(例如: 560)：
console.log($(window).height());
console.log(document.documentElement.clientHeight);
但后来当我做同样的事情时，它显示了整个文档的高度(例如: 11675)。
有很多HTML和JS，需要一段时间才能弄清楚是怎么回事，我只是想知道，有没有人看到这样的东西，如果是的话，是什么导致了它，我如何才能获得正确的视窗大小？所有google搜索结果都表明这是检索值的正确方法。
浏览 2提问于2013-06-03得票数 0
回答已采纳
我需要跨浏览器兼容的Javascript代码，它将返回所有三种浏览器(IE，Firefox，Webkit Chrome/Safari)中当前文档区域的高度和宽度。我不需要整个窗口的大小(因为它是在桌面上)，但文档的高度和宽度，因为它属于CSS布局。
谢谢
浏览 2提问于2009-10-07得票数 0
回答已采纳
如何将TPopupMenu与表单的右侧对齐？问题是，在调用Popup(X, Y: Integer)之前，似乎没有办法获得弹出菜单的宽度。
我正在尝试获得一个类似于Chrome系统菜单的行为。
浏览 1提问于2012-07-25得票数 10
回答已采纳
我想找到滚动条宽度与JavaScript在CSS中使用它。我试过了：
document.documentElement.style.setProperty('--scrollbar-width', (document.offsetWidth - document.clientWidth) + "px");
但我没那么走运。我用的是chrome 86。
浏览 0提问于2020-12-03得票数 3
1回答
好的，所以我正在寻找真正的响应百分比图像大小调整，这是独立于容器。换句话说，我想调整图像的大小相对于它自己的大小。
原因是这样，我可以动态调整页面上的所有图像的大小，使其屏幕尺寸更小。
现在，由于它将用于CMS解决方案，并且用户被假定为HTML不受欢迎，我们不能用任何东西包装图像，我们不能向它们添加类/ID等等。
我将希望更改页面上的所有图像，但可以应用类或ID的少数图像除外。
我目前正在使用：
img {
-webkit-transform: scale(0.625) translate(-29%, 0); /* Saf3.1+, Chrome */
-moz-transfor
浏览 0提问于2014-12-05得票数 0
回答已采纳
1回答
仅媒体查询不按预期运行
、、、
我正在尝试编写一些jQuery，它只在我的CSS媒体查询的同时进行响应。
我有对象在特定的滚动点滑到网页上。但是，为了保持对象响应性，我需要使用媒体查询更改滚动点。
这是代码：
jQuery(window).scroll(function () {
//media query scroll point @ min 768, max 995
if (document.documentElement.clientWidth <= 995 && document.documentElement.clientWidth >
浏览 7提问于2015-12-23得票数 0
回答已采纳
在下面的示例中，this.refs.foo.clientWidth返回undefined，我不知道原因。如何获得SomeComp在PageComp中的引用以使用其宽度？(使用React 15.2.1或类似的方法)
class PageComp extends React.Component {
componentDidMount() {
console.log(this.refs.foo.clientWidth);
}
render() {
return (
<div>
<p>{this.props.n
浏览 3提问于2016-07-21得票数 3
回答已采纳
我试图找到浏览器视窗的确切高度和宽度，但我怀疑Mozilla或IE给了我错误的数字。下面是我计算高度的方法：
var viewportHeight = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
我还没有开始宽度，但我猜它会是类似的东西。
有没有更正确的方法来获取这些信息？理想情况下，我希望这个解决方案也能在Safari/Chrome/其他浏览器上使用。
浏览 1提问于2009-11-20得票数 73
回答已采纳
1回答
在我目前正在进行的一个项目中，我有关于restrict: 'E'的指令。
在我的应用程序中的某个时刻，我需要知道其中一个指令的高度，但是无论我如何确定指令的宽度和高度，我总是得到0。
我发现了一些类似的问题，但是解决方案没有帮助，因为这些问题主要是关于在指令控制器/链接器中找到$element的高度/高度。在我的例子中，试图找出维度的代码在指令链接器之外。实际上，这些指令已经插入DOM中一段时间了。
代码如下所示：
// the directive
app.directive("widget", function() {
return {
浏览 0提问于2018-06-22得票数 2
编辑：
我想用JS了解文档的实际使用情况。
我创建了一个小提琴，我知道它的宽度是1160px，这在谷歌chrome中有效，但在IE中不起作用：
document.body.clientWidth+document.body.scrollLeft
(只需滚动小提琴并悬停div)；
有什么想法吗？
浏览 1提问于2012-06-15得票数 0
回答已采纳
当您打开Chrome工具并调整窗口大小时，右上角会出现一个小的白色框，告诉您在调整窗口大小时窗口的大小。我在下面的截图中用一个绿色的大箭头标记了它。
这是一个非常有用的工具，但我注意到，这些值经常是意外的，并且与其他元素的宽度不一致。例如，当我在下面截图时，Chrome说窗口的宽度是419 is。但是如果我点击html元素，其宽度应该是100%，Chrome告诉我它的宽度是404 me。这让我很困惑。他们为什么不一样？这是Chrome的错误吗？
浏览 11提问于2014-03-05得票数 16
回答已采纳
我有一个文本区域，它的行高设置为"normal“。但是，我仍然可以在FireFox中获得实际的像素值：
// firefox
>>> $("#post_body").css('line-height')
"19.1167px"
而在Chrome中我不能：
// chrome
>>> $("#post_body").css('line-height')
"normal"
如何在Chrome中获得实际的像素线高度？
浏览 1提问于2011-12-01得票数 6
我用chrome (使用时间线)监视了我的站点的页面加载时间，并收到了数百条警告：“强制同步布局可能是所有Raphael.js调用的性能瓶颈”：
我不知道如何解决这个问题。
对去哪儿找有什么想法吗？
以下是我通常在页面上创建文本的方式：
currentPaper.text(width,height,"text")
.attr({opacity:.8, fill: "#333", 'font-size':10})
.id = "someId";
//Or, to be ex
浏览 6提问于2015-02-19得票数 1
回答已采纳
1回答
我正在尝试为我们学校的学生创建一个网站，但我遇到了一个小问题。我的天哪，当我向左或向右滚动时，我的背景并没有覆盖整个页面，它只是停在滚动之前页面的一侧，但是当你把浏览器窗口变大时，这个问题就消失了。
这个html
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
浏览 0提问于2012-10-27得票数 0
回答已采纳
我想让我网站上的图片适合其包含元素的大小，所以我有这样的设置：
if (userHasMicrositePhoto) {
var width = $('micrositePhotoDiv').getComputedSize().width;
$('micrositePhoto').src = "flash/userImage.ashx?type=micrositePhoto&id=" + userId + "&width=" + width;
}
我的处理程序文件userImage.ashx返回ID
浏览 4提问于2011-10-14得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
