Изменить семейство шрифтов на основе другого значения CSS

Question

Я пытаюсь изменить семейство шрифтов класса (.button) на основе значения семейства шрифтов h6.Я понимаю, что это не может быть сделано с помощью CSS, но не смог найти решение напрямую через JS.Хотелось бы, чтобы применение стилей в таблице стилей было таким же простым, но значение h6 динамически задается пользователем.Есть идеи?

Спасибо!

Answer 1

Ваш вопрос не достаточно ясен для меня, но я попытался ответить вам более общим решением вашей проблемы!

В приведенной ниже демонстрации я создал input, как если быпользователь введет туда значение, и кнопка с button id и ее font-size будет изменена в соответствии со значением, предоставленным пользователем в поле input

var sizeInput = document.querySelector("#sizeInput")
var myBtn = document.querySelector("#button")
var sizeFromTheUser

sizeInput.addEventListener("change", function() {
  // Update the variable's value based on the changed value from the user
  sizeFromTheUser = sizeInput.value
  // Change the font-size based on the given value
  switch(sizeFromTheUser) {
    case "h1":
      myBtn.style.fontSize = "2em"
    break;
    case "h2":
      myBtn.style.fontSize = "1.5em"
    break;
    case "h3":
      myBtn.style.fontSize = "1.17em"
    break;
    case "h4":
      myBtn.style.fontSize = "1em"
    break;
    case "h5":
      myBtn.style.fontSize = "0.83em"
    break;
    case "h6":
      myBtn.style.fontSize = "0.75em"
    break;
  }
  
})

  <input type="text" id="sizeInput" />
  <button id="button">This is text!</button>

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

Answer 2

Это самый простой способ сделать это, поскольку вы используете jQuery.

Просто для демонстрации вы можете видеть, что кнопка получает шрифт элемента H6 после нажатия кнопки.

Если вы хотите, чтобы это произошло немедленно, удалите функцию click(), удалив первую и последнюю строку кода JS (первый блок кода).

$('.my-button').click( function(){
  var font = $('.my-title').css("font-family");
  var weight = $('.my-title').css("font-weight");
  $('.my-button').css('font-family', font);
  $('.my-button').css('font-weight', weight);
});

.my-title {
  font-family: "Lucida Handwriting";
  font-weight: bold;
}
.my-button {
  font-family: Verdana;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h6 class="my-title">Hello World</h6>

<button class="my-button">Some Button</button>

Answer 3

Имейте потенциальные font-family стили, заранее настроенные в классах, и затем используйте логику if/then, чтобы установить правильный класс для элемента.Краеугольным камнем этого является свойство element.classList и его метод .add().

// Get references to the elements we need to work with
let h6 = document.querySelector("h6");
let btn = document.querySelector("button.button");

// Use if/then/else logic to set the button class
if(h6.classList.contains("foo")){
  btn.classList.add("newFoo");
} else if(h6.classList.contains("bar")){
  btn.classList.add("newBar");  
} else if(h6.classList.contains("baz")) {
  btn.classList.add("newBaz");  
}

/* Example of what the pre-existing classes might be: */
.foo { font-family:"Comic Sans MS"; font-size:2em; margin:.5em; }

/* New styles that will be used to override: */
.newFoo { font-family:"Times New Roman"; }
.newBar { font-family:sans-serif; }
.newBaz { font-family:monospace; }

<h6 class="foo">foo</h6>
<button class="button">Click Me!</button>