Javascript-форум - Метод для конвертирования едениц px, em, %, pt.

В процессе разработки собственной библиотеки javascript кода, было замечено одно недоразумение: некоторые браузеры, возвращали значения некоторых CSS правил HTML элементов в разных еденицах. Чтобы избавится от такой неприятности, был создан метод, который конвертирует значения: px, em, %, pt, туда и обратно, в зависимости от передаваемых функции параметров.

Пример: конверсия PX в %, EM, PT

<iframe scrolling="no" frameborder="0" src="http://www.jegit.ru/iframe/utilities/unit/1.html" name="iframe_11850167" style="height: 570px;width:100%"></iframe>

<!DOCTYPE>
<html>
<head>
  <script type="text/javascript" src="jegit/jegit.js"></script>
  <script type="text/javascript">

// после загрузки документа
    $( document ).ready( function() {
        // после изменения списка любого SELECT
        $( 'select' ).change( function() {
            // получаем значение первого select
            var val = $( 'select:eq(0)' ).val();
            // получаем значение второго select
            var parse = $( 'select:eq(1)' ).val();
                // значение должно быть true или false
                parse = parse === 'true' ? true : 0;
            // конвертируем px в em еденицы
            $( '.em' ).text( $.unit( val, 'em', parse ) );
            // конвертируем px в % еденицы
            $( '.pr' ).text( $.unit( val, '%', parse ) );
            // конвертируем px в pt еденицы
            $( '.pt' ).text( $.unit( val, 'pt', parse ) );
        // вызываем все события для первого SELECT
        }).eq( 0 ).trigger()
    })

</script>
</head>
<body>
<!-- HTML CODE слишком большой чтобы показать -->
</body>
</html>

Пример: конверсия EM в %, PX, PT

<iframe scrolling="no" frameborder="0" src="http://www.jegit.ru/iframe/utilities/unit/2.html" name="iframe_11850167" style="height: 570px;width:100%"></iframe>

<!DOCTYPE>
<html>
<head>
  <script type="text/javascript" src="jegit/jegit.js"></script>
  <script type="text/javascript">

// после загрузки документа
    $( document ).ready( function() {
        // после изменения списка любого SELECT
        $( 'select' ).change( function() {
            // получаем значение первого select
            var val = $( 'select:eq(0)' ).val();
            // получаем значение второго select
            var parse = $( 'select:eq(1)' ).val();
                // значение должно быть true или false
                parse = parse === 'true' ? true : 0;
            // конвертируем em в px еденицы
            $( '.px' ).text( $.unit( val, 'px', parse ) );
            // конвертируем em в % еденицы
            $( '.pr' ).text( $.unit( val, '%', parse ) );
            // конвертируем em в pt еденицы
            $( '.pt' ).text( $.unit( val, 'pt', parse ) );
        // вызываем все события для первого SELECT
        }).eq( 0 ).trigger()
    })

</script>
</head>
<body>
<!-- HTML CODE слишком большой чтобы показать -->
</body>
</html>

Пример: конверсия % в EM, PX, PT

<iframe scrolling="no" frameborder="0" src="http://www.jegit.ru/iframe/utilities/unit/3.html" name="iframe_11850167" style="height: 570px;width:100%"></iframe>

<!DOCTYPE>
<html>
<head>
  <script type="text/javascript" src="jegit/jegit.js"></script>
  <script type="text/javascript">

// после загрузки документа
    $( document ).ready( function() {
        // после изменения списка любого SELECT
        $( 'select' ).change( function() {
            // получаем значение первого select
            var val = $( 'select:eq(0)' ).val();
            // получаем значение второго select
            var parse = $( 'select:eq(1)' ).val();
                // значение должно быть true или false
                parse = parse === 'true' ? true : 0;
            // конвертируем % в px еденицы
            $( '.px' ).text( $.unit( val, 'px', parse ) );
            // конвертируем % в em еденицы
            $( '.em' ).text( $.unit( val, 'em', parse ) );
            // конвертируем % в pt еденицы
            $( '.pt' ).text( $.unit( val, 'pt', parse ) );
        // вызываем все события для первого SELECT
        }).eq( 0 ).trigger()
    })

</script>
</head>
<body>
<!-- HTML CODE слишком большой чтобы показать -->
</body>
</html>

Пример: конверсия PT в EM, PX, %

<iframe scrolling="no" frameborder="0" src="http://www.jegit.ru/iframe/utilities/unit/4.html" name="iframe_11850167" style="height: 570px;width:100%"></iframe>

<!DOCTYPE>
<html>
<head>
  <script type="text/javascript" src="jegit/jegit.js"></script>
  <script type="text/javascript">

// после загрузки документа
    $( document ).ready( function() {
        // после изменения списка любого SELECT
        $( 'select' ).change( function() {
            // получаем значение первого select
            var val = $( 'select:eq(0)' ).val();
            // получаем значение второго select
            var parse = $( 'select:eq(1)' ).val();
                // значение должно быть true или false
                parse = parse === 'true' ? true : 0;
            // конвертируем pt в px еденицы
            $( '.px' ).text( $.unit( val, 'px', parse ) );
            // конвертируем pt в em еденицы
            $( '.em' ).text( $.unit( val, 'em', parse ) );
            // конвертируем pt в % еденицы
            $( '.pr' ).text( $.unit( val, '%', parse ) );
        // вызываем все события для первого SELECT
        }).eq( 0 ).trigger()
    })

</script>
</head>
<body>
<!-- HTML CODE слишком большой чтобы показать -->
</body>
</html>

Несмотря на некоторые несоответствия судя по таблице, fireFox - fireBug показывает идентичный результат в пикселях конечно.

Ещё одним достоинством метода jegit.unit является его малый размер - меньше 1kb при сжатии и его автономность - выполнен как независимый объект.

Если будет получен отклик - вынесу его из библиотеки в отдельный файл.

Ну а пока он встроен в библиотеку Jegit javascript framework - это прямая ссылка.