本文介绍了如何使用JavaScript在HTML中创建一个动态功能，通过鼠标悬停和按钮点击，实现输入框内容的大小写切换。涉及getElementById、toUpperCase和toLowerCase方法的应用。
将内容变为大写先通过var s=document.getElementById('demo').value;获取输入框中的内容
document.getElementById('demo').value=s.toUpperCase();将内容改为大写
function DaXie(){
var s=document.getElementById('demo').value;
document.getElementById('demo').value=s.toUpperCase();
}将内容变为小写的方法
function XiaoXie(){
var s=document.getElementById('demo').value;
document.getElementById('demo').value=s.toLowerCase();
}通过鼠标的移入变为大写移除变为小写
<input id="demo" name="name" onmouseover="DaXie()" onmouseout="XiaoXie()">通过按钮来控制大小写
<input id="demo" name="name" >
<br/>
<button type="button" onclick="DaXie()">大写</button>
<button type="button" onclick="XiaoXie()">小写</button>完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input id="demo" name="name" onmouseover="DaXie()" onmouseout="XiaoXie()">
<br/>
<button type="button" onclick="DaXie()">大写</button>
<button type="button" onclick="XiaoXie()">小写</button>
</body>
<script>
function DaXie(){
var s=document.getElementById('demo').value;
document.getElementById('demo').value=s.toUpperCase();
}
function XiaoXie(){
var s=document.getElementById('demo').value;
document.getElementById('demo').value=s.toLowerCase();
}
</script>
</html>
扫一扫
1878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
