Определить ширину элемента

Question

У меня есть элемент, который мне нужно переместить в экран при нажатии кнопки, а затем отменить экран при повторном нажатии.

Проблема в том, что я бы не хотел писать определенную ширину поля, потому что это не всегда будет одинаковым. Я думал, что этот код должен это сделать, но я получаю ссылку ReferenceError «Не могу найти переменную: ширина». Есть идеи, как улучшить его?

var itemWidth = $("#about_box").css(width); 

console.log($("#about_box").width()); 

var itemOut = false; 

$(document).ready(function() { 

    $("#about").click(function(){ 

     var value1 = 30; 
     var value2 = -itemWidth; 

     console.log(itemOut); 

     if (itemOut == false) { 
      $("#about_box").stop(); 
      $("#about_box").animate({left: value1}, 350); 
      itemOut= true; 
     } else { 
      $("#about_box").stop() 
      $("#about_box").animate({left: value2}, 150); 
      itemOut = false; 
     } 


    }); 

}); 

Answer 1

Вы должны использовать один из следующих вариантов:

$("#about_box").width() //element only width 
$("#about_box").innerWidth() //element + padding width 
$("#about_box").outerWidth() //element + padding + border width 

И использовать его внутри $ (документ) .ready обработчика, так как до того, что вы, вероятно, не получит любую ширину, как DOM еще не отображается ,

Answer 2

Вы пропустили Кавычки здесь

var itemWidth = $("#about_box").css(width);

должен быть

var itemWidth = $("#about_box").css("width");

Answer 3

Эта строка содержит синтаксическую ошибку и бросить исключение: var itemWidth = $("#about_box").css(width);

Yo и нужно использовать:

var itemWidth = $("#about_box").css('width');

или

var itemWidth = $("#about_box").width();

Answer 4

var itemWidth = $("#about_box").css(width); 

изменение:. вар itemWidth = $ ("# about_box") шириной(); и рассмотрите, нужна ли вам внешняя ширина (прокладка) или нет.

Answer 5

Это должно быть:

var itemWidth = $("#about_box").css("width"); 

т.е. ширина в кавычках.