CODEWITHSUNDEEP
javascriptjqueryhtml
Cam
Cam

Reputation: 15

jQuery attr() method to change a class name

I'm trying to use the attr() jQuery method to change the class name of an h1 element when an option is selected from a drop-down form. I want the classes name to change to access different CSS properties (fonts)

I think I am not digging down into the DOM further enough to change the class?

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>

Upvotes: 0

Views: 15306

Answers (5)

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

Syntax error 

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

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

https://jsfiddle.net/zu2ku6w8/

Upvotes: 0

user6748331
user6748331

Reputation:

Mainly, the .attr() method isn't intended for the classes manipulation. Use:

$(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)

Upvotes: 1

nazmul.3026
nazmul.3026

Reputation: 1008

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

or

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

you can view details form

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

Upvotes: 0

Mamun
Mamun

Reputation: 68923

Change $('h1').attr('class', +fontChange); To

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

Upvotes: 0

Mazz
Mazz

Reputation: 1879

You can either use attr or prop depending on your jQuery version:

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

To add a class to existing classes

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

To remove a class

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

but jQuery offers classManipulation directly

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

Upvotes: 2

Related Questions