Question

当我从下拉表单中选择一个选项时，我正在尝试使用attr（）jQuery方法来更改h1元素的类名。我希望更改类名以访问不同的CSS属性（字体）

我认为我没有进一步深入研究DOM以改变课程？

function myFontStyle() {
  $('#font').on("change", function() {
    var fontChange = this.value
    console.log(this.value);
    $('h1').attr('class', + fontChange);
  });
}
myFontStyle();

.handwriting{
  font-family: 'Pacifico', cursive;
}
.sketch{
  font-family: 'Fredericka the Great', cursive;
}
.print{
  font-family: 'Sigmar One', cursive;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="font">Choose font</label>
<select name="font" id="font">
  <option value="handwriting">Handwriting</option>
  <option value="sketch">Sketch</option>
  <option value="print">Print</option>
</select>

<div class="card celadonBackground">
  <div id="coverImage">
    <img src="assets/birthday.jpg"/>
  </div>
  <div class="noBorder">
    <h1 class="sketch">Happy birthday to you</h1>
  </div>
</div>

Answer 1

您可以使用attr或prop，具体取决于您的jQuery版本：

$(selector).attr('class', 'className'); // jQuery < 1.6
$(selector).prop('class', 'className'); // jQuery >= 1.6

将类添加到现有类

var classes = $(selector).prop('class');
$(selector).prop('class', classes + ' className');

删除课程

var classes = $(selector).prop('class').replace('notNeededClass', '');
$(selector).prop('class', classes);

但jQuery直接提供classManipulation

$(selector).addClass('className');
$(selector).removeClass('className');
$(selector).toggleClass('className');

Answer 2

主要是，.attr()方法不适用于类操作。使用：

$(selector).addClass('className') for adding class to element(s)
$(selector).removeClass('className') for removing class from element(s)
$(selector).toggleClass('className') for toggling class appereance in element(s)

Answer 3

将$('h1').attr('class', +fontChange);更改为

$('h1').attr('class', fontChange);

function myFontStyle() {
    $('#font').on("change", function() {
    var fontChange = this.value
    //console.log(this.value);

    $('h1').attr('class', fontChange);
    console.log('h1 has now class: ', $('h1').attr('class'))
  });
    
    
}
myFontStyle();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="font">Choose font</label>
<select name="font" id="font">
  <option value="handwriting">Handwriting</option>
  <option value="sketch">Sketch</option>
  <option value="print">Print</option>
</select>

<div class="card celadonBackground">
  <div id="coverImage">
    <img src="assets/birthday.jpg"/>
  </div>
  <div class="noBorder">
    <h1 class="sketch">Happy birthday to you</h1>
  </div>
</div>

Answer 4

语法错误

Function A
----------

 Synopsis:

 [:option:`-sub_interface_count` <0-65535>]


 Arguments:

 .. option:: -sub_interface_count  

                Number of sub-interfaces


Function B
----------

 Synopsis:

 [:option:`-sub_interface_count` <0-65535>]

 Arguments:

 .. option:: -sub_interface_count  

                Number of sub-interfaces

https://jsfiddle.net/zu2ku6w8/

Answer 5

$("h1").attr('class', fontChange);

或

$("h1").addClass(fontChange);

您可以查看详细信息表单

http://api.jquery.com/category/manipulation/class-attribute/

jQuery attr（）方法更改类名

5 个答案: