[問題] 改變字型大小，只靠js可以嗎?

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