Border-left-width возвращает NaN в jQuery

Question

Я занят написанием небольшого фрагмента кода, который должен разрешать кросс-браузерное использование модели рамки с рамками. Пока что базовая функциональность работает нормально, но я не могу заставить работать. Он должен адаптироваться к доступному пространству, но консоль возвращает NaN, и я понятия не имею, откуда он.

Вот скрипка

На console.log ничего не записывается, и я не знаю почему. Любая помощь с благодарностью.

Answer 1

Во многих частях вашей скрипки у вас есть этот шаблон:

($(this).css("border-left-width") * 2).replace("px", "")

Вы пытаетесь стереть px после выполнения умножения, которое приводит к синтаксической ошибке. Должно быть либо

($(this).css("border-left-width").replace("px", "") * 2)

Который работает через автоматическое преобразование типа или

(parseInt($(this).css("border-left-width"), 10) * 2)

Который анализирует строку как целое число, удаляя завершающий px:

Если parseInt встречает символ, который не является цифрой в указанном основании, он игнорирует его и все последующие символы и возвращает целочисленное значение, проанализированное до этой точки. parseInt усекает числа до целых значений. Ведущие и конечные пробелы разрешены.

скрипка

parseInt ссылка

Answer 2

Потому что это:

  $(this).css("padding-left")

а также

$(this).css("border-left-width")

возвращает строку, содержащую "px", которую вы пытаетесь умножить на 2, в результате чего получается NaN. Вы можете решить эту проблему, анализируя получающиеся строки с плавающей точкой перед умножением, например так:

(parseFloat($(this).css("padding-left")) * 2 )

Надеюсь это поможет!