Изменить стиль шрифта опцией Dropdown Javascript - PullRequest
Новая
       3

Изменить стиль шрифта опцией Dropdown Javascript

0 голосов
/ 21 апреля 2020

У меня есть тест для изменения стиля текста с помощью выпадающего списка Javascript и CSS. но я просто нахожу изменение типа шрифта на этом сайте, и я ничего не получил от Google. и это мой код: 

var changeFont = function(font) {
  console.log(font.value)
  document.getElementById("output-text").style.fontFamily = font.value;
}
.tebal {
  font-family: Verdana;
  font-size: 12px;
  color: blue;
  font-weight: bold;
}

.miring {
  font-family: Verdana;
  font-size: 12px;
  color: blue;
  font-weight: italic;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script src="http://code.jquery.com/jquery-git2.js"></script>

<div class="jumbotron text-center">
  <h3>Text Style Changed with combobox</h3>
</div>

<div class="text-center" id="output-text">
  Hello Guys
</div>

<div class="text-center">
  <select id="input-font" class="input" onchange="changeFont (this);">
    <option value="Times New Roman" selected="selected">Times New Roman</option>
    <option value="Arial">Arial</option>
    <option value="algerian">Algerian</option>
    <option value="berlin sans fb">Berlin Sans FB</option>
    <option value="bold" class="bold">Tebal</option>
    <option value="miring" class="miring">Miring</option>
    <option value="" class="">Style1</option>
    <option value="" class="">Style2</option>
    <option value="" class="">Style3</option>
  </select>
</div>

Я хочу, чтобы это было так Это (Фото) каждый раз, когда я меняю стиль из поля со списком, стиль текста, который он будет менять но я не могу найти пример, как это сделать и в чем проблема из моего кода. пожалуйста, помогите мне решить этот код :(, спасибо.

Примечание: это перевод с моей фотографии - текст ini berubah sesuai css = этот текст изменяется в соответствии с css - tebal = Bold - Miring = Курсив - bingkai = Рамка

Ответы [ 3 ]

1 голос
/ 21 апреля 2020

Я думаю, что было бы проще определить класс для каждого шрифта. затем поместите имя класса в значение параметра. С этим будет более гибко, если вам нужно добавить другой стиль к вашему тексту (не только семейство шрифтов, но вы можете добавить цвет или что-то еще к классу) Вот пример с вашим случаем 

var changeFont = function(font) {
  console.log(font.value)
  document.getElementById("output-text").className = "text-center " + font.value;
}
.bold {
  font-family: Verdana;
  font-size: 12px;
  color: blue;
  font-weight: bold;
}

.miring {
  font-family: Verdana;
  font-size: 12px;
  color: blue;
  font-style: italic;
}

.Arial{
  font-family: Arial;
}
.Algerian{
  font-family: Algerian;
}
.Berlin-sans-fb{
  font-family: 'Berlin sans fb';
}
.Times-new-roman{
  font-family: 'Times New Roman';
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script src="http://code.jquery.com/jquery-git2.js"></script>
</head>

<body>
  <div class="jumbotron text-center">
    <h3>Text Style Changed with combobox</h3>
  </div>

  <div class="text-center" id="output-text">
    Hello Guys
  </div>

  <div class="text-center">
    <select id="input-font" class="input" onchange="changeFont (this);">
      <option value="Times-new-roman" selected="selected">Times New Roman</option>
      <option value="Arial">Arial</option>
      <option value="Algerian">Algerian</option>
      <option value="Berlin-sans-fb">Berlin Sans FB</option>
      <option value="bold" class="bold">Tebal</option>
      <option value="miring" class="miring">Miring</option>
      <option value="" class="">Style1</option>
      <option value="" class="">Style2</option>
      <option value="" class="">Style3</option>
    </select>
  </div>
0 голосов
/ 21 апреля 2020

Почему бы вам не попробовать выражение if? И я думаю, вам нужен внутренний HTML. 

var changeFont = function(font) {
if (font === "tebal") {
document.getElementById("output-text").innerHTML = "You have selected Tebal!";
} else if (font === miring) {
document.getElementById("output-text").innerHTML = "You have selected Miring!";
} else...

Редактировать: Ах, похоже, я неправильно прочитал ваш вопрос. Хотя вы все равно можете использовать l oop для смены стилей!

0 голосов
/ 21 апреля 2020

Я бы посоветовал вам использовать вместо этого className, если вы хотите прикрепить несколько стилей.

Так, например, в свой тег script вы можете добавить: 

document.getElementById("output-text").className = font.value;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...