使用 jquery 将 H1 内容更改为小写答案

【问题标题】：Change H1 content to lowercase with jquery使用 jquery 将 H1 内容更改为小写
【发布时间】：2016-11-06 00:56:51
【问题描述】：

我正在寻找一种将 H1 的内容（实际上是大写）转换为小写的方法。理想情况下，如果 jquery 中存在，将其更改为 text-transform 属性的大写 css 设置可能会很棒。为什么在 jquery 中？因为css方式不允许我这样做.. 这是我的起始代码：

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

谢谢

编辑：通过将这个提示添加到 JS 方式来修复它，https://css-tricks.com/almanac/selectors/f/first-letter/

Sass 代码：

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

【问题讨论】：

或者您可以使用 jQuery 应用 css 规则：$('h1').css({ textTransform: 'lowercase' }); 请参阅 this fiddle。

标签： javascript jquery html lowercase

【解决方案1】：

试试这个纯 JavaScript 代码

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

【讨论】：

【解决方案2】：

使用 html 或文本：

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

或者

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

【讨论】：

【解决方案3】：

您可以使用.text()

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

不过我会选择@JayeshChitroda apprach

【讨论】：

【解决方案4】：

您需要在方法html() 或text() 中传递值

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

我建议你使用css：

h1{
  text-transform: lowercase;
}

【讨论】：

【解决方案5】：

h1 没有值，它有 text() 或 html()。

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

【讨论】：

【解决方案6】：

在h1标签中添加text-transformcss属性，将文本转换为小写

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

【讨论】：

你的方式工作，但我最终会转换为大写..css不允许我从大写转换为大写，只能转换为小写，所以我可以在转换后转换为大写变成小写？