js如何改变文章的字体大小
最近发现有许多朋友提问:使用射流研究…如何改变一篇文章的字体的大小?
小编查阅了相关文章,为大家整理了几个小案例,供大家参考,具体内容如下
效果图:
点击大、小按钮,随时切换字体大小
具体代码:
html health eta http-equiv=' Content-Type ' Content=' text/html;字符集=GB 2312/标题使用射流研究…如果改变一篇文章字体的大小/title/head style type=' text/CSS ' a { text-decoration : none;color : # 0c 3 } a :悬停{ color : # F36 }/style body script function更改大小(大小){ document。getelementbyid(' article _ content ')。风格。font size=size ' px} /scriptdiv id='article_content '我们br/我们欢迎您p好好学习天天向上/diva href=' JavaScript :更改大小(' 20 ')大/aa href=' JavaScript :更改大小(' 12 ')小/a/body/html再为大家分享一栗子:
这个工作原理很简单,就是在触发事件的时候将文章的字号改变,更直白一些就是改变字体大小这个属性的值(jQuery版本1.7.2)HTML
div class=' box ' div class=' ctrl ' a href=' JavaScript :'放大/a a href=' JAVAScript :'缩小/a a href=' JAVAScript :'默认/a/div class=' cont '这里是一些文字/div/divCSS。box { text-align : center}.ctrl { padding:50px 0px 0px 0px背景: # F4 F4;font-size :0 px边框-底部:3px实心# 333;}.ctrl a { display : inline-block;宽度:50 px高度:30 px线高:30 px背景技术: # 333;color : # ffffont-size :14 px;}.ctrl a :悬停{背景: # 444;color : # fff font-weight :700;文本装饰:无;}.cont { padding-top :50 px;font-size :14 px}JS
$(function(){ function SiZein(){ var SiZeCont=parsent($(')).(续).CSS(' FontSize ');//获取原设定的字体大小的值if(sizeCont==30){ //判断字体大小增大到30像素时停止$('.(续).CSS({ font size : sizecont });}else{ $(' .(续).CSS({ font size : size cont 1 });} }函数SiZeout(){ var SiZe cont=ParSeint($(').(续).CSS(' FontSize ');if(sizeCont==10){ //判断字体大小减小到10像素时停止$('.(续).CSS({ font size : sizecont });}else{ $(' .(续).CSS({ font size : size cont-1 });} }函数sizeDefault(){ $(' .(续).css({fontSize:''}) } $(' .ctrl a ').单击(function(){ if($(this)).index()==0){ SiZein();}else if($(this).index()==1){ sizeOut();} else { SiZeDefault();} })});希望本文所述对大家学习爪哇岛描述语言程序设计有所帮助。
版权声明:js如何改变文章的字体大小是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。