javascript - 使用带有文本转换的 jquery 获取文本

Question

我有一个 html 元素，我切换它的类并使用 text-transform 显示大写/小写字母。

是否可以通过 text-transform 获取文本？

$('#toggle').click(function(){
  $('#char').toggleClass('upper');
});

$('#getdata').click(function(){
  var text = $('#char').text();
  alert(text);  /// here i need to get the actual word with capital/lower i selected
});

.upper{
 text-transform:uppercase;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span contenteditable="true" id="char">a</span>
<br/>
<button id="toggle">Toggle case</button>
<button id="getdata">gat data</button>

Answer 1

您可以检查类并使用 toUpperCase:-

$('#toggle').click(function(){
  $('#char').toggleClass('upper');
});

$('#getdata').click(function(){
  var $char = $('#char');
  var text = $char.hasClass('upper') ? $char.text().toUpperCase() : $char.text();
  alert(text);  /// here i need to get the actual word with capital/lower i selected
});

.upper{
 text-transform:uppercase;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span contenteditable="true" id="char">a</span>
<br/>
<button id="toggle">Toggle case</button>
<button id="getdata">gat data</button>