jQuery 宽度、outerWidth、innerWidth - 返回假值

Posted 2023-02-22

【中文标题】jQuery 宽度、outerWidth、innerWidth - 返回假值

【英文标题】：jQuery width, outerWidth, innerWidth - return fake values

【发布时间】：2017-03-03 09:00:17

【问题描述】：

我想绝对定位我的动画扣，这是我的 html：

<div id="about">
    <div id="weare">lorem.ipsum</div>
    <div id="who"><span id="whospan"><B>LOREMSIT.DOLOR</B></span></div>
    <div id="what"><div id="klamra_l">[</div><div id="klamra_r">]</div><span id="whatspan">Lorem ipsum dolor sit amet, consectetur.</span></div>
</div>

我正在使用 jQuery：

function ustawklamry()

    var w_what = parseInt($("#what").outerWidth(true));
    var w_whatspan = parseInt($("#whatspan").outerWidth(true));
    var left = parseInt((w_what - w_whatspan)/2);
    var right = parseInt(left + w_whatspan);
    $("#klamra_l").css("left",left);
    $("#klamra_r").css("left",right);
    console.log(w_what + ";" + w_whatspan + ";" + left + ";" + right);


ustawklamry();

我得到的是：

在控制台中我看到：

964;596;184;780

更重要的是，带扣之间的间距等于#whatspan（绿色字段）。 我不知道为什么它不起作用。我尝试了宽度、外部宽度、内部宽度，但没有人在工作。 如果您需要任何其他数据，请寻求帮助 - 询问。

【问题讨论】：

检查这个小提琴：jsfiddle.net/Lr9cm2nL 它显示：540;330;105;435

请使用您已经使用的 CSS 完成您的问题。至于 jQuery 维度方法之间的区别看这个答案：***.com/a/17845094/6920871

天哪，我看到它在小提琴上运行良好，但在我的网站上却没有......我在页面加载时想到了问题，我使用了 $(document).ready(function() ...但它也不起作用。问题出在哪里？

这里是 CSS：jsfiddle.net/Lr9cm2nL/1

更重要的是，10% 的刷新以良好的结果结束...

【参考方案1】：

首先，我将解决您的以下问题。

天哪，我发现它在小提琴上运行良好，但在我的网站上却不行……我在页面加载时想到了问题，我使用了 $(document).ready(function().. .但它也不起作用。问题出在哪里？

这是因为页面其他部分的代码干扰了您在页面这部分的代码。如果您在 javascript 中的任何地方都找不到它，那么它一定在您的 CSS 中。尝试打开开发工具（检查页面）并查看菜单从生产页面中的父元素继承的 CSS 值。然后，尝试检查 JSfiddle 页面。最后，尝试让生产页面上继承自父元素的 CSS 与 JSFiddle 页面上继承自父元素的 CSS 相同。现在它应该可以工作了。另外，请密切注意!important 标签。我暗中怀疑他们可能是罪魁祸首。

到下一个问题：您实际上并不需要 javascript。此外，您的布局不灵活，在某些设备上看起来不错，而在其他设备上看起来很糟糕，因为您没有使尺寸适应用户的屏幕尺寸。这是一个在 IE9 中工作的演示，通过使用vw 字体大小单位和transform: translateY(.125em) 使括号居中，自动根据用户的屏幕大小调整大小。此外，您可以减少 DOM 的使用。考虑到所有这些事情，我希望你觉得这很有用：

#about 
    border: 2vw solid #FFF;
    padding: 3vw;
	//border-radius: 50% / 50%;
    display: inline-block;
	background-color: black;
	max-width: 80vw;
	outline: 99vh solid black;
	box-shadow: 0 0 0 99vw black;
	overflow: hidden;
	position: fixed;
	top:0;bottom:0;
	left:5vw;right:5vw;
	margin: auto 0;
	height: 17.5vw;

#weare 
    color: #FFF;
    font-size: 3vw;
    margin: 0 auto;
    text-align: center

#who 
    color: #FFF;
    font-size: 9vw;
    margin: 0 auto;
    font-family: Oswald, sans-serif;
    text-align: center;
    letter-spacing: 133%;
	font-weight: bold;

#what 
    color: #FFF;
    font-size: 2.5vw;
    margin: 0 auto;
    font-weight: 300;
    text-align: center;
	vertical-align: middle;
    background-color: red;

#greenbackground::before 
	direction: rtl;

#greenbackground::after, #greenbackground::before 
	content: ']';
	font-size: 2em;
	transform: translateY(.125em);
	background: none;
	line-height: 0;
	display:inline-block;
	color: white;
	width: 0;

#greenbackground 
	background:green;
	display:inline-block;
	height: 100%;

<div id="about">
	<div id="weare">lorem.ipsum</div>
	<div id="who">LOREMSIT.DOLOR</div>
	<div id="what"><span id="greenbackground">Lorem ipsum dolor sit amet, consectetur.</span></div>
</div>

JSFiddle Link

要为其添加一些时髦的圆度，您只需要多一行代码即可。

#about 
  border: 2vw solid #FFF;
  padding: 3vw;
	border-radius: 50% / 50%;
  display: inline-block;
	background-color: black;
	max-width: 80vw;
	outline: 99vh solid black;
	box-shadow: 0 0 0 99vw black;
	overflow: hidden;
	position: fixed;
	top:0;bottom:0;
	left:5vw;right:5vw;
	margin: auto 0;
	height: 17.5vw;

#weare 
    color: #FFF;
    font-size: 3vw;
    margin: 0 auto;
    text-align: center

#who 
    color: #FFF;
    font-size: 9vw;
    margin: 0 auto;
    font-family: Oswald, sans-serif;
    text-align: center;
    letter-spacing: 133%;
	font-weight: bold;

#what 
    color: #FFF;
    font-size: 2.5vw;
    margin: 0 auto;
    font-weight: 300;
    text-align: center;
	vertical-align: middle;
    background-color: red;

#greenbackground::before 
	direction: rtl;

#greenbackground::after, #greenbackground::before 
	content: ']';
	font-size: 2em;
	transform: translateY(.125em);
	background: none;
	line-height: 0;
	display:inline-block;
	color: white;
	width: 0;

#greenbackground 
	background:green;
	display:inline-block;
	height: 100%;

<div id="about">
	<div id="weare">lorem.ipsum</div>
	<div id="who">LOREMSIT.DOLOR</div>
	<div id="what"><span id="greenbackground">Lorem ipsum dolor sit amet, consectetur.</span></div>
</div>

JSFiddle Link