整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          javascript實(shí)現(xiàn)字體變大變小效果

          些項(xiàng)目中會(huì)常看到點(diǎn)擊文章內(nèi)容文字變大縮小效果!下面就來(lái)說(shuō)說(shuō)用javascript實(shí)現(xiàn)該簡(jiǎn)單效果,供小伙伴們參考!

          整體的效果如下:

          效果圖

          點(diǎn)擊加減按鈕即可對(duì)文字的放大縮小

          實(shí)現(xiàn)代碼如下

          html展示:

          主要javascript代碼:

          主要是用javascript來(lái)改變文字的px值使文字變大縮小!

          • 是一個(gè)用vue.js對(duì)css操作完成的實(shí)例。
          • 當(dāng)然用了flex簡(jiǎn)單布局。

          一、先創(chuàng)建一個(gè)html文件,記得添加vue庫(kù)文件。

          二、創(chuàng)建一盒容器vmdiv,用vue綁定它,測(cè)試vue綁定后的插入值text1效果。

          三、加入文本框和兩個(gè)按鈕。

          四、通過(guò)flex排序,讓它們?nèi)齻€(gè)豎排。比例為文本框占4,按鈕占1。

          五、測(cè)試一下按鈕的點(diǎn)擊事件。

          六、給文本框添加style樣式,給它字體大小為16px,并設(shè)置一個(gè)變量size,讓它來(lái)控制字的大小,通過(guò)點(diǎn)擊后,字變大加5,變小減5。

          篇文章主要講述了CSS樣式更改中的背景Background,這篇文章我們來(lái)談?wù)勛煮w設(shè)置Font&邊框Border的基礎(chǔ)用法。

          1.字體設(shè)置Font

          1).字體系列

          <div style='font-family: sans-serif normal'></div>
          可用字體:
          Serif
          Sans-serif
          Monospace
          Cursive
          Fantasy
          Times
          Courier

          2).字體風(fēng)格

          <div style='font-style:normal'></div>
          文本傾斜:
          normal   文本正常顯示
          italic   文本斜體顯示
          oblique  文本傾斜顯示

          3).字體變形

          <div style='font-variant:small-caps'></div>
          normal          顯示標(biāo)準(zhǔn)字體。
          small-caps      顯示小型大寫字母的字體。

          4).字體加粗

          <div style='font-weight:normal'></div>
          normal    標(biāo)準(zhǔn)的字符
          bold      粗體字符
          bolder    更粗的字符
          lighter   更細(xì)的字符
          也可以使用數(shù)字表示,范圍為100~900

          5).字體大小

          <div style='font-size:60px'></div>
          smaller 變小
          larger  變大
          length  固定值
          而且還支持百分比

          2.邊框Border

          首先說(shuō)一下邊框風(fēng)格,它的風(fēng)格比較多,常用的一般是實(shí)線為主:

          <div style='border-style:none'></div>
          hidden     隱藏邊框
          dotted     點(diǎn)狀邊框
          dashed     虛線邊框
          solid      實(shí)線邊框
          double     雙線邊框
          groove     3D凹槽邊框
          ridge      3D壟狀邊框
          inset      3D inset邊框
          outset     3D outset邊框
          邊框也有四面,所以也會(huì)有上下左右
          所以有時(shí)候?yàn)榱烁_定位并修改樣式可以使用:
          border-top-style     上邊框樣式
          border-right-style   右邊框樣式
          border-bottom-style  下邊框樣式
          border-left-style    左邊框樣式

          先定義邊框的寬度 風(fēng)格和顏色,然后定義邊框的其它屬性。

          1).邊框形狀

          <div style='border-radius:25px;'></div>

          2).邊框陰影

          <div style='box-shadow:1px 2px 2px 2px red'></div>
          參數(shù)含義:
          邊框各個(gè)方向的大小和顏色

          3).邊框圖片

          <div style='border-image:url(1.png) 30 30 10 round'></div>
          參數(shù)含義:
          邊框圖片的路徑
          圖片邊框向內(nèi)偏移
          圖片邊框的寬度
          邊框圖像區(qū)域超出邊框的量
          圖像邊框是否應(yīng)平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。

          總結(jié)

          這篇文章主要介紹了CSS樣式更改篇中的字體設(shè)置Font&邊框Border設(shè)置,希望讓大家對(duì)CSS選擇器有個(gè)簡(jiǎn)單的認(rèn)識(shí)和了解。
          ****看完本文有收獲?請(qǐng)轉(zhuǎn)發(fā)分享給更多的人****

          IT共享之家

          想要學(xué)習(xí)更多,請(qǐng)前往Python爬蟲(chóng)與數(shù)據(jù)挖掘?qū)S镁W(wǎng)站:http://pdcfighting.com/


          主站蜘蛛池模板: 国产乱子伦一区二区三区| 亚洲码一区二区三区| 无码一区二区三区视频| 国产日韩一区二区三区| 精品国产日韩一区三区| 91亚洲一区二区在线观看不卡| 蜜桃视频一区二区三区| 久久高清一区二区三区| 精品国产一区二区三区香蕉事| 亚洲爆乳精品无码一区二区| 欲色影视天天一区二区三区色香欲| 欧洲精品码一区二区三区免费看| 久久99精品一区二区三区| 国产成人一区二区三中文| 国产福利电影一区二区三区,免费久久久久久久精| 日本在线电影一区二区三区| 加勒比无码一区二区三区| 亚洲国产精品一区二区三区在线观看 | 亚洲AV色香蕉一区二区| 亚洲AV综合色区无码一区爱AV| 日本一区二区三区免费高清在线| 狠狠色婷婷久久一区二区三区| 国产视频一区二区| 少妇人妻偷人精品一区二区| 国产精品福利一区| 欧洲精品一区二区三区| 免费高清在线影片一区| 国产精品一区二区毛卡片| eeuss鲁片一区二区三区| 国产麻豆精品一区二区三区| 成人欧美一区二区三区在线视频| 天美传媒一区二区三区| 日韩精品久久一区二区三区| 综合一区自拍亚洲综合图区| 美女视频一区二区| 中文字幕日韩一区二区三区不| 一区二区在线视频免费观看| 成人无码一区二区三区| 国产一区二区在线看| 日本免费一区二区三区 | 激情内射亚州一区二区三区爱妻|