html+JS实现点击按钮实现文字持续变大变小实例

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<script>

 window.onload = function(){

  var oBnt1 = document.getElementById('bnt1');

  var oBnt2 = document.getElementById('bnt2');

  var oP = document.getElementById('text');

  var num = 16;

  oBnt1.onclick = function(){

   num –;

   oP.style.fontSize = num+'px';

  }

  oBnt2.onclick = function(){

   num ++;

   oP.style.fontSize = num+'px';

  }

 

 }

</script>

</head>

 

<body>

    <input id="bnt1" type="button" value="-" />

    <input id="bnt2" type="button" value="+" />

    <p id="text">萝卜白菜<br>红萝卜,大白菜,红的红来白的白。吃萝卜,吃白菜,圆圆的脸儿真可爱。</p>

</body>

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

免责声明:本文系转载自互联网,版权归原作者所有;旨在传递信息,不代表中站源码网的观点和立场。如有侵权,请联系我们删除!qin@ceccz.com

中站源码网-网络情报局 CMS教程 html+JS实现点击按钮实现文字持续变大变小实例 https://web.ceccz.com/cmsjc/3823.html

中站网

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议换浏览器下载!
查看详情

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

 
html+JS实现点击按钮实现文字持续变大变小实例-海报

分享本文封面