jQuery width，outerWidth，innerWidth - 返回假值

Question

我想绝对定位动画的扣环，这是我的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（绿色字段）。 我不知道它为什么不起作用。我尝试了width，outerWidth，innerWidth，没有人工作。 如果您需要任何其他数据，请寻求帮助 - 询问。

Answer 1

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

哦，天哪，我看到它在小提琴上运作良好，但在我的网站上没有...我在页面加载时考虑了问题，我使用了$（文件）.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