Кнопка onClick не работает с этим JS или запускает jquery Resizable Font-size программно?

Вот JS-плагин пользовательского интерфейса с изменяемым размером, который отлично работает с щелчком мыши и перетаскиванием.
Он меняется font-size с помощью мыши. Это означает, что когда я изменяю ширину или высоту моего div с помощью id = "chartdiv" из угла мыши, это правильно меняет font-size. Однако, когда я меняю ширину или высоту моего div с помощью id = "chartdiv" с кнопки onClick, это не работает.
Я хочу использовать эту функцию изменения размера font-size от Button.

Для этого запроса я уже посещал этот ответ: Как программно вызвать изменение размера jquery Resizable? но нет функции font-size

Какую ошибку я здесь делаю?

Ниже мой код:

<!DOCTYPE html>
<html>
<head>
    <style>
        .resize{
    font-size: 2.8vh;
    white-space: nowrap;
    color: black;
    background: yellow;
    cursor: move;
    width: 300px;
    height: 130px
}

 .resize:focus {
   width: 500px;  }

    </style>
    <script src = "/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>

 <button type = "button" onClick = "document.getElementById('chartdiv').style.width = '600px';">Click Me!</button>
 
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
<div class = "resize" id = "chartdiv">Some name that is very long</div>
    <script type = "text/javascript">
        $('.resize').resizable( {
minWidth: 210,
minHeight: 120,
resize: function( event, ui ) {
        // handle fontsize here
        var size = ui.size;
        // something like this change the values according to your requirements
        $( this ).css( 'font-size', ( size.width * size.height ) / 2800 + 'px' ); 
    }
} );
    </script>
</body>
</html>

Заранее спасибо.

когда вы изменяете размер div, он вызывает событие изменения размера с функцией, которую вы написали, но когда вы нажимаете кнопку, он явно устанавливает ширину стиля, а не событие изменения размера. Для этого вам нужно написать отдельную функцию для кнопки.

— 22.12.2020 14:46

javascript html jquery

22.12.2020 14:02

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

<button type = "button" onClick = "ResizeWithButton();">Click Me!</button>

function ResizeWithButton(){
     var x = document.getElementById('chartdiv');
     x.style.width = '600px';
     var rect = x.getBoundingClientRect();
     x.style.fontSize = `${(rect.width * rect.height)/2800}px`;
}

22.12.2020 14:51

Ответ принят как подходящий

Ниже создается простая функция плагина jQuery fontResize(), которую можно использовать в обоих случаях.

$.fn.fontResize = function() {
  return this.each(function() {
    const $el = $(this);
    $el.css('font-size', ($el.width() * $el.height()) / 2800 + 'px');
  });
}

$('button.do-resize').click(function(){
   $('#chartdiv').width(600).fontResize()// use plugin function
})


$('.resize').resizable({
  minWidth: 210,
  minHeight: 120,
  resize: function(event, ui) {   
    $(this).fontResize();// use plugin function
  }
});

<!DOCTYPE html>
<html>

<head>
  <style>
    .resize {
      font-size: 2.8vh;
      white-space: nowrap;
      color: black;
      background: yellow;
      cursor: move;
      width: 300px;
      height: 130px
    }
    
    .resize:focus {
      width: 500px;
    }
  </style>
  <script src = "/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>

<body>

  <button class = "do-resize"  type = "button" >Click Me!</button>

  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
  <link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
  <div class = "resize" id = "chartdiv">Some name that is very long</div>


</body>

</html>

Здравствуйте, @charlietfl, пожалуйста, скажите мне, могу ли я сделать это изменение размера с плавной анимацией? и как ?

— 22.12.2020 15:01

Проверьте jQuery animate()api.jquery.com/animate

— 22.12.2020 15:03

не могли бы вы помочь мне добавить это плиззззззззззз.

— 22.12.2020 15:04

22.12.2020 14:53