案例:
![](https://img-blog.csdnimg.cn/51cbc9d1ffab4a6892fc7e490e3b1d97.gif)
参考代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>字符串大小写转换</title>
<style>
.one{
margin-left:16px;
}
</style>
</head>
<body>
<h2>大小写转换</h2>
<p>原数据:
<input id="old" type="text"></p>
<p class="one">操作:
<input type="button" value="转大写" onClick="deal('upper')">
<!--点击onClick就调用deal方法-->
<input type="button" value="转小写" onClick="deal('lower')"></p>
<p>新数据:
<input id="new" type="text"></p>
<script>
function deal(opt){
var str=document.getElementById("old").value;//获取原数据的值
switch(opt){
case 'upper':
str=str.toUpperCase();//转大写
break;
case 'lower':
str=str.toLowerCase();//转小写
break;
}
document.getElementById("new").value=str;//对转换的数据进行赋值
}
</script>
</body>
</html>