Change H1 content to lowercase with jquery

问题

I'm looking for a way to tranform my H1's content (actually in uppercase) to lowercase. Ideally, it could be great to change it to the capitalize css setting of text-tranform property if exist in jquery.Why in jquery ? because the css way doesn't allowed me to do so .. This is my starting code:

$('h1').each(function(){
var h1content = $(this).val().toLowerCase();
$(this).text().toLowerCase();
 });

thanks

EDIT: fix it with adding this tips to the JS way , https://css-tricks.com/almanac/selectors/f/first-letter/

Sass code:

h1.titre-vdl{
    color: $violet;
    &::first-letter{
        text-transform: capitalize;
    }
}

回答1:

Add text-transform css property to h1 tag to convert text to lowercase

$('h1').css('text-transform','lowercase');

回答2:

An h1 doesn't have a value, it has text() or html().

$('h1').each(function(){
    $(this).text( $(this).text().toLowerCase() );
});

回答3:

you need pass the value in the method html() or text()

$('h1').each(function() {
  var h1content = $(this).text().toLowerCase();
  $(this).text(h1content);
});

I recommend you to do it with css:

h1{
  text-transform: lowercase;
}

回答4:

You can use .text()

$('h1').text(function(_, text){
    return text.toLowerCase();
});

However I will go with @JayeshChitroda apprach

回答5:

Use html or text:

$('h1').each(function(){
    $(this).text( $(this).text().toLowerCase() );
});

$('h1').each(function(){
    $(this).html( $(this).html().toLowerCase() );
});

回答6:

Try this pure javascript code

var h1Elements = document.querySelectorAll('h1');
for (var ele of h1Elements) {
  ele.innerHTML = ele.innerHTML.toLowerCase();
  console.log(ele.innerHTML)
}

来源：https://stackoverflow.com/questions/38182236/change-h1-content-to-lowercase-with-jquery

标签

javascript

jquery

html

lowercase