JQuery ширина, 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

Во-первых, я обращусь к вашей следующей проблеме.

О, боже, я вижу, что он работает хорошо на скрипке, но на моем сайте нет ... Я думал о проблеме во время загрузки страницы, и я использовал $ (document) .ready (function() {... но это не работает. Где проблема?

Это потому, что код из других частей страницы мешает вашему коду для этой части страницы. Если вы не можете найти его где-либо в своем javascript, то он должен быть в вашем CSS. Попробуйте открыть инструменты dev (осмотреть страницу) и посмотреть, какие значения CSS, которые меню наследует от своего родительского элемента на вашей рабочей странице. Затем попробуйте проверить страницу JSfiddle. для получения CSS, унаследованного от родительского элемента на рабочей странице, таким же, как наследование CSS ed из родительского элемента на странице JSFiddle. Теперь это должно сработать. Также обратите внимание на теги !important. У меня есть подозрение, что они могут быть виновниками.

К следующей проблеме: на самом деле вам не нужен javascript. Кроме того, ваш макет негибкий, он будет хорошо смотреться на некоторых устройствах и плохо на других, потому что вы не делаете размер адаптивным к размеру экрана пользователя. Вот демоверсия, которая работает в IE9 и автоматически изменяет размеры на основе размера экрана пользователя, используя vw единиц в размере шрифта и transform: translateY(.125em) для центровки скобок. Кроме того, вы можете сократить использование DOM. Принимая во внимание все эти вещи, я надеюсь, вы найдете это очень полезно:

#about { 
 
    border: 2vw solid #FFF; 
 
    padding: 3vw; 
 
\t //border-radius: 50%/50%; 
 
    display: inline-block; 
 
\t background-color: black; 
 
\t max-width: 80vw; 
 
\t outline: 99vh solid black; 
 
\t box-shadow: 0 0 0 99vw black; 
 
\t overflow: hidden; 
 
\t position: fixed; 
 
\t top:0;bottom:0; 
 
\t left:5vw;right:5vw; 
 
\t margin: auto 0; 
 
\t 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%; 
 
\t font-weight: bold; 
 
} 
 
#what { 
 
    color: #FFF; 
 
    font-size: 2.5vw; 
 
    margin: 0 auto; 
 
    font-weight: 300; 
 
    text-align: center; 
 
\t vertical-align: middle; 
 
    background-color: red; 
 
} 
 
#greenbackground::before { 
 
\t direction: rtl; 
 
} 
 
#greenbackground::after, #greenbackground::before { 
 
\t content: ']'; 
 
\t font-size: 2em; 
 
\t transform: translateY(.125em); 
 
\t background: none; 
 
\t line-height: 0; 
 
\t display:inline-block; 
 
\t color: white; 
 
\t width: 0; 
 
} 
 
#greenbackground { 
 
\t background:green; 
 
\t display:inline-block; 
 
\t height: 100%; 
 
}

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

JSFiddle Link

Чтобы добавить притягательный округлость к ней, все, что вам нужно, это одна дополнительная строка кода.

#about { 
 
    border: 2vw solid #FFF; 
 
    padding: 3vw; 
 
\t border-radius: 50%/50%; 
 
    display: inline-block; 
 
\t background-color: black; 
 
\t max-width: 80vw; 
 
\t outline: 99vh solid black; 
 
\t box-shadow: 0 0 0 99vw black; 
 
\t overflow: hidden; 
 
\t position: fixed; 
 
\t top:0;bottom:0; 
 
\t left:5vw;right:5vw; 
 
\t margin: auto 0; 
 
\t 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%; 
 
\t font-weight: bold; 
 
} 
 
#what { 
 
    color: #FFF; 
 
    font-size: 2.5vw; 
 
    margin: 0 auto; 
 
    font-weight: 300; 
 
    text-align: center; 
 
\t vertical-align: middle; 
 
    background-color: red; 
 
} 
 
#greenbackground::before { 
 
\t direction: rtl; 
 
} 
 
#greenbackground::after, #greenbackground::before { 
 
\t content: ']'; 
 
\t font-size: 2em; 
 
\t transform: translateY(.125em); 
 
\t background: none; 
 
\t line-height: 0; 
 
\t display:inline-block; 
 
\t color: white; 
 
\t width: 0; 
 
} 
 
#greenbackground { 
 
\t background:green; 
 
\t display:inline-block; 
 
\t height: 100%; 
 
}

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

JSFiddle Link