Question

我试图根据h6的字体系列值更改类（.button）的字体系列。我意识到这无法使用CSS来完成，但是无法直接通过JS找到解决方案。我希望在样式表中应用样式一样容易，但是h6值由用户动态整理。有什么想法吗？

谢谢！

Answer 1

提前在类中预先设置潜在的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>

Answer 2

这是最简单的方法，因为您使用的是jQuery。

仅用于演示，您可以在单击按钮后看到该按钮采用H6元素的字体。

如果您希望这种情况立即发生，请通过删除JS代码的第一行和最后一行（第一个代码块）来删除click()函数。

$('.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

您的问题对我来说还不够清楚，但是我试图用更通用的解决方案来回答您！

在下面的演示中，我创建了一个input，好像用户将在其中键入一个值，并创建一个ID为button的按钮，其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不同情况，甚至可以使用不同的逻辑，但我只是为您提供了一个通用示例，可能对您有所帮助情况！

根据其他CSS值更改字体系列

3 个答案: