Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.09.2018, 15:17
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

Как добавить sans-serif к font-family?
Привет, уважаемые. Подскажите, как настроить скрипт.

Составил скрипт, который подгружает шрифты с гугл фотн. Все шрифты прописываются в отдельной опции. При выборе опции в
селекте, для body добавляется font-family и меняется шрифт страницы. Аналогично сделал селекты для толщины и стиля, а
вот на счет засечек не могу сообразить.
Решил сделать через чекбокс, он работает, добавляет к font-family еще и sans-serif, а вот как убрать засечки по второму
щелчку хз) Подскажите, как настроить? Или может можно вернуть предыдущее значение при повторном клике? Например, если я в опцию внесу обычный шрифт типа "Circe-Bold, sans-serif"

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>
    <div class='serif-select'>
      <label for='serif'>Sans-Serif <input type='checkbox' id='serif'></label>
    </div>

    <script>
      let
        body = document.body,
        serif = document.getElementById('serif');

      serif.onchange = function() {
        if (serif.checked) {
          body.style.fontFamily += 'sans-serif';
        } else {
          body.style.fontFamily += '';
        }
      }

    </script>

    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
      Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х
      годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
  </body>

</html>
Ответить с цитированием
  #2 (permalink)  
Старый 14.09.2018, 15:25
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

body.style.fontFamily = body.style.fontFamily.replace('sans-serif', '');
Ответить с цитированием
  #3 (permalink)  
Старый 14.09.2018, 19:29
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

j0hnik,
то что надо, спасибо
Ответить с цитированием
  #4 (permalink)  
Старый 14.09.2018, 19:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

madeas,
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>

    <body>
        <div class='serif-select'>
            <label for='serif'>Sans-Serif <input type='checkbox' id='serif'></label>
        </div>

        <script>
            let
                body = document.body,
                serif = document.getElementById('serif'),
                fontFamily = body.style.fontFamily;
            serif.onchange = function() {
                if (serif.checked) {
                    body.style.fontFamily += 'sans-serif';
                } else {
                    body.style.fontFamily = fontFamily;
                }
            }

        </script>

        <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
            Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х
            годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
    </body>

</html>
Ответить с цитированием
  #5 (permalink)  
Старый 14.09.2018, 19:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

madeas,
а ещё проще, убрать плюсы из кода
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>
    <div class='serif-select'>
      <label for='serif'>Sans-Serif <input type='checkbox' id='serif'></label>
    </div>

    <script>
      let
        body = document.body,
        serif = document.getElementById('serif');

      serif.onchange = function() {
        if (serif.checked) {
          body.style.fontFamily = 'sans-serif';
        } else {
          body.style.fontFamily = '';
        }
      }

    </script>

    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
      Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х
      годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
  </body>

</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обратный отсчет на js как добавить 0 при значении от 0 до 9 kovalenko3331 Общие вопросы Javascript 2 08.04.2016 08:59
Как добавить в append цикл Cdelphi78 Элементы интерфейса 5 02.03.2016 22:40
Как добавить класс, если div виден пользователю? sovsem-nub Элементы интерфейса 4 20.02.2016 18:16
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Как добавить свой блог в раздел feeds этого сайта IzumeRoot Ваши сайты и скрипты 13 30.10.2008 21:11