Привязать входное значение к стилю другого элемента

У меня есть следующий код

<input id = "in" value = "50px"/>
<div id = "out">this is my output</div>

как привязать с помощью jquery значение #in к #outfont-size?

Ограничения:

а) вариант из этот код тоже должен работать:

$(function() {  
  $("#out").css("fontSize", $("#in").val());

  $("#in").on("input", function(e) {
    $("#out").css("fontSize", $("#in").val());
  });

  $("#in").val("5px"); // should update the font size! 
});

б) когда браузер автозаполнение вставляет значения в поля, значение должно измениться...

Используйте on('input', fn) и css(). Если вам нужна конкретная помощь, отредактируйте вопрос, включив в него свои собственные попытки решить эту проблему.

— 06.02.2019 12:32

(1) прочитать значение ввода (2) установить размер шрифта [сделать это для каждого изменения ввода]

— 06.02.2019 12:32

может кто-нибудь объяснить отрицательные отзывы?

— 06.02.2019 13:28

обновил ОП, добавил ограничения

— 06.02.2019 14:21

javascript jquery html css binding

06.02.2019 12:30

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

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

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

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

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

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

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

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

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

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

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

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

187

Ответы 5

Используйте функцию .css jquery

$('#in').keyup(function() {
  $("#out").css('font-size', $('#in').val()+"px")

})

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id = "in" value = "18" />
<br><br>
<br>

<div id = "out">this is my output</div>

почему все используют событие keyup? на самом деле это не сработает, просто запустив приложение

— 06.02.2019 13:30

06.02.2019 12:33

Вы должны применить свой CSS с функцией .css из JQuery, когда событие запускается (здесь keyup).

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id = "in" value = "18px"/>
<div id = "out">this is my output</div>
<script>
$('#in').on('keyup', function () {
    $('#out').css({'font-size':$(this).val()});
});
</script>

06.02.2019 12:37

С чистым javascript:

const inp = document.querySelector("#inp");
const out = document.querySelector("#out");

inp.addEventListener("keyup", function(){
  out.style.fontSize = inp.value + "px";
})

<input id = "inp" type = "text" placeholder = "write a value">
<div id = "out">this is my output</div>

06.02.2019 12:38

Проверьте эту скрипку:

Вам нужно будет проверить информацию перед изменением размера шрифта:

<input id = "in" value = "18px"/>
<div id = "out">this is my output</div>  
$(function() {
    $("#in").on('input',function(e){
    $("#out").css("fontSize", $("#in").val());
  });

});  
https://jsfiddle.net/3vhdfruq/1/

работает, только если поле сфокусировано и выполняется ввод

— 06.02.2019 13:32

Извините, я не понял. Вы хотите изменить при загрузке? Просто вызовите "$("#out").css("fontSize", $("#in").val());" при загрузке скрипта...

— 06.02.2019 14:15

06.02.2019 12:41

var inp = document.querySelector("#inp");
var out = document.querySelector("#out");

inp.addEventListener("keyup", function(){
  out.style.fontSize = inp.value + "px";
})

<input id = "inp" type = "text" value = "20">
<div id = "out">this is my output</div>

зависит от клавиши

— 06.02.2019 13:30

06.02.2019 12:58

Другие вопросы по теме

Bootstrap 4 Popovers не работают в теме Wordpress Understrap

Как обновить скрипт через некоторое время с помощью Javascript

HighChart скрывает другие серии при нажатии на легенду

Несколько календарей на одной странице для каждого месяца с цветом события для каждой даты

TinyMCE не вставляет разрыв строки для \n

Активная ссылка с использованием Javascript

Как отправить закодированный JSON на новую страницу и декодировать его?

ChartJS не отображает динамические данные из ASPX

Прокрутка навигационных стиков вверх

JQuery resizable() для динамических элементов, работающих до предпоследнего элемента, но не для последнего элемента

Привязать входное значение к стилю другого элемента

Ответы 5

Другие вопросы по теме

Похожие вопросы