作者kiki1503 (琦琦壹伍零參)
看板Ajax
標題[問題] 改變字型大小，只靠js可以嗎?
時間Sun Oct 11 21:51:03 2009
我想要做的效果是頁面上有5個按鈕
"最小" "較小" "標準" "較大" "最大"
按了按鈕就會模擬瀏覽器改變字型的大小
我目前是設5種CSS片段
然後動態判斷並改變網頁裡面的指定CSS
可是這樣不但效能很差，撰寫起來也很繁雜
請問只靠js跟CSS就做出此功能有可能嗎?
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 114.45.188.103
1F：推 adamp3:你可以改變指定node中的class CSS中再寫各class的字體大小 10/11 22:22
2F：推 ybite:我會這樣作：如果你所有字體大小都用百分比或指定的話 10/11 22:23
3F：→ ybite:修正一下說法好了，忘記前一行 Orz 10/11 22:23
4F：→ ybite:你可以做一個container，然後在這個container下的所有字體 10/11 22:24
5F：→ ybite:都用相對的字體（百分比或em），然後當container字體大小變 10/11 22:24
6F：→ ybite:話的時候，其下的所有字體大小都會變 10/11 22:24
7F：→ ybite: ^^^^ 字體大小 這樣就只要修改一個物件的字體 10/11 22:24
8F：→ kiki1503:不是很明白.我目前的確是用em指定大小的 10/11 22:32
9F：→ kiki1503:上面像這樣 .font1{font-size:0.8em;} 10/11 22:34
10F：→ kiki1503:.font2{font-size:1.2em;} 10/11 22:34
11F：→ kiki1503:之後使用者按按鈕時動態改變物件的style值 10/11 22:35
12F：→ kiki1503:所以頁面上有多少個物件會顯示文字就要寫幾段程式碼 10/11 22:36
13F：→ kiki1503:以確保整頁的文字都會跟著改變 10/11 22:36
14F：→ kiki1503:可是每個物件都要寫五段(對應5個按鈕)感覺有點傻 10/11 22:37
15F：→ kiki1503:所以要上來問一下有沒有js可以直接達成 10/11 22:38
16F：→ kiki1503:不用一個元件一個元件去改屬性改 10/11 22:39
17F：→ ybite:我的想法是: (1) body.font1{ font-size: 0.8em; } 10/11 22:46
18F：→ ybite:(2) 改的時候直接對body加上font1這個class 10/11 22:47
19F：→ ybite:這樣應該整個頁面都會立刻變大 10/11 22:47
20F：→ kiki1503:可是這樣一來不就全頁的字型都一樣了@@? 10/11 22:50
21F：→ kiki1503:例如表格之中.標題是1.2em.文字是1em.註解是0.8em 10/11 22:51
22F：→ kiki1503:在body下了之後..全頁都變0.8em了..而不是比例向上調整 10/11 22:52
23F：推 tomin:body+1 你其他內容可以蓋過去啊 body.main.content{font..} 10/11 22:54
24F：→ tomin:直接body{font-size:1em} document.body.style.fontsize改 10/11 22:55
25F：→ tomin:或是body切換class 10/11 22:56