<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>转换输入文字大小写</title>
<style type="text/css">
body{
text-align: center;
}
#SR{
margin-top: 15%;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<input type="text" id="SR">
<br>
<button id="xiao">转换成小写</button>
<button id="da">转换成大写</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
$('#xiao').on('click',function(){
var XX=$('#SR').val();
var A= XX.toLowerCase();
//alert(A);
$('#SR').val(A);
});
$('#da').on('click',function(){
var XX=$('#SR').val();
var A= XX.toUpperCase();
//alert(A);
$('#SR').val(A)
});
</script>
</body>
</html>