属性操作-页面文字放大、缩小

xiaoxiao2021-02-28  191

在线演示

css:

<style> #oP { font-size: 15px; } </style>

html:

<input type="button" value="+" id="Jia"> <input type="button" value="-" id="Jian"> <p id="oP">我是一段文字。。。</p>

javascript:

<script> window.onload = function(){ var jia = document.getElementById('Jia'); var jian = document.getElementById('Jian'); var oP = document.getElementById('oP'); var num = 15;//原来字体大小是15px,所以要在它的基础上进行增减 jia.onclick = function(){ num ++; //注意:JS中不允许出现中划线'-'例如:font-size.要写成fontSize格式。 //alert(num);查看弹出的内容 oP.style.fontSize = num + 'px'; //弹出的num只是数字,并没有像素单位,所以要添加单位,否则不会改变字体大小 } jian.onclick = function(){ num --; oP.style.fontSize = num + 'px'; } } </script>

注意: 1. JS中不允许出现中划线’-‘例如:font-size.要写成fontSize格式。 2. 弹出的num只是数字,并没有像素单位,所以要添加单位,否则不会改变字体大小

转载请注明原文地址: https://www.6miu.com/read-30327.html

最新回复(0)