回复
按钮放大与缩小字体
深处莫神
发布于 2022-8-9 17:49
浏览
0收藏
按钮放大缩小对应字体
1.获取需要使用的元素,可以通过document.getElementById
2.绑定事件，是直接去获取的行内元素样式
3.获取字体大小的时候存在单位px,利用parseInt()转换为整数!
4.在放到到一定程度时给提示
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<h1>字体放大与缩小</h1>
<button id="big">放大</button> <br />
<button id="small">缩小</button> <br />
<span id="friend" style="font-size: 16px;">我们是好朋友</span>
</body>
</html>
<script>
var big = document.getElementById('big')
// console.log('收到')
var small = document.getElementById('small')
var friend = document.getElementById('friend')
// console.log('朋友')
// 绑定事件
big.onclick = function () {
var size = parseInt(friend.style.fontSize)
// console.log(size)
if (size >= 100) {
alert('超过最大限制')
return
}
friend.style.fontSize = `${size + 10}px`
}
// 缩小
small.onclick = function () {
var size = parseInt(friend.style.fontSize)
if (size <= 16) {
alert('已经达到最小限制')
return
}
friend.style.fontSize = `${size - 10}px`
}
</script>
分类
标签
已于2022-8-9 17:50:54修改
赞
1
收藏
回复
相关推荐
