javascript - 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

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

Oh my god, I see it is working good on fiddle but on my website not... I thought about problem while page is loading and I used $(document).ready(function(){... but it is not working too. Where is the problem?

这是因为页面其他部分的代码正在干扰您为页面的这一部分编写的代码。如果您在 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