Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.06.2019, 05:39
Новичок на форуме
Отправить личное сообщение для Ruslantech Посмотреть профиль Найти все сообщения от Ruslantech
 
Регистрация: 14.06.2019
Сообщений: 1

Выбор нескольких условий одновременно
Я начинающий разработчик, столкнулся вот с такой проблемой: мне нужно применить одновременно несколько стилей для абзаца, но применяется только один и последний по выбору. Помогите кто сможет, заранее благодарен.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JavaScript</title>
    <style>
      
    </style>
  </head>
  <body>
    <ul>
      <p>Lorem ipsum dolor sit amet.</p>
      <input type="checkbox" value="text-decoration:line-through;"><span>перечеркнуть</span>
      <input type="checkbox" value="font-weight:bold;"><span>сделать жирным</span>
      <input type="checkbox" value="color:red"><span>сделать красным</span>
    <script>
      let text = document.querySelector('p')
      let input = document.querySelectorAll('input')
      for(var i = 0; i < input.length; i++){
        input[i].addEventListener('change', func)
      }

      function func(){
        if(this.checked){
          text.style.cssText = this.value
        }else{
          text.style.cssText = 'none'
        }
      }
    </script>
  </body>
</html>

Последний раз редактировалось Ruslantech, 14.06.2019 в 05:48.
Ответить с цитированием
  #2 (permalink)  
Старый 14.06.2019, 10:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,103

Ruslantech,
строку cssText надо формировать в цикле, обходя все checked, и только потом менять style.
либо менять свойства style, а не style.cssText
Ответить с цитированием
  #3 (permalink)  
Старый 14.06.2019, 10:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,103

Ruslantech,
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>JavaScript</title>
        <style>

        </style>
    </head>
    <body>

            <p>Lorem ipsum dolor sit amet.</p>
            <input type="checkbox" value="text-decoration:line-through;"><span>перечеркнуть</span>
            <input type="checkbox" value="font-weight:bold;"><span>сделать жирным</span>
            <input type="checkbox" value="color:red;"><span>сделать красным</span>
        <script>
            let text = document.querySelector('p')
            let input = document.querySelectorAll('input')
            for(var i = 0; i < input.length; i++){
                input[i].addEventListener('change', func)
            }

            function func(){
                var txt = '';
                for(var i = 0; i < input.length; i++){
                var el = input[i];
                if(el.checked) txt += el.value
                }
                text.style.cssText = txt
            }
        </script>
    </body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 14.06.2019, 10:39
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 356

Сообщение от Ruslantech Посмотреть сообщение
но применяется только один и последний по выбору.
Так вы задаёте стиль text.style.cssText = this.value
Собственно стиль назначается из value инпута на котором прошло событие.

Вариант через цикл forEach:
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>JavaScript</title>
        <style>
 
        </style>
    </head>
    <body>
 
            <p>Lorem ipsum dolor sit amet.</p>
            <input type="checkbox" value="text-decoration:line-through;"><span>перечеркнуть</span>
            <input type="checkbox" value="font-weight:bold;"><span>сделать жирным</span>
            <input type="checkbox" value="color:red;"><span>сделать красным</span>
        <script>
           let text = document.querySelector('p'),
            inputs = document.querySelectorAll('input');

        function textStyle() {
            let stl = '';

            inputs.forEach(el => el.checked ? stl += el.value : 0);

            text.style.cssText = stl;
        }

        inputs.forEach(el => el.addEventListener('input', textStyle));
        </script>
    </body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
рандомный выбор нескольких значений из массива Alekseyideas Элементы интерфейса 7 21.10.2016 15:18
Выбор только нескольких пунктов PonyS Общие вопросы Javascript 27 31.05.2016 15:10
Select выбор нескольких пунктов DDSSDD Элементы интерфейса 4 08.09.2014 16:18
Прогресс бар для загрузки нескольких файлов через XHR Ваяс AJAX и COMET 0 04.12.2013 11:03
выбор нескольких элементов ввиде ссылок Simon jQuery 0 21.08.2010 11:31