討論區快速選單
知識庫快速選單
傑米的攝影旅遊筆記 網路投保旅行平安險 政府補助!學嵌入式+物聯網
[ 回上頁 ] [ 討論區發言規則 ]
JavaScript -- Label 文字,點選後改變文字大小
更改我的閱讀文章字型大小
作者 : picard(picard)
[ 貼文 21 | 人氣 3 | 評價 80 | 評價/貼文 3.81 | 送出評價 0 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2010/9/29 上午 09:39:17
請教一個JavaScript 的問題:

HTML 已經設定好 Label 文字,可以改變文字的大小(pt),如下所示:

[JavaScript]

<script type="text/javascript">

     function fontSize(){
     document.getElementById('LB1').style.fontSize=R1.M1.options[R1.M1.selectedIndex].text+'pt';}

</script>


[html]

<form name="R1">
    <select name="M1" onChange="fontSize();">
     <option>10</option>
     <option>12</option>
     <option>14</option>
     <option>16</option>
    </select>
</form>

<label id="LB1">
    台灣是美麗的寶島
</label>


但如果有好幾組 Label 文字,例如說有三組 Label,

分別是:

<label id="LB1">台灣是美麗的寶島
<label id="LB2">地球是美麗的行星
<label id="LB3">銀河是美麗的星系

用滑鼠按一下 Label 上的文字,成為焦點後,再去呼叫文字大小,

這樣就可以像繪圖軟體,點選文字後設定文字大小,請教該如何做呢?
作者 : picard(picard)
[ 貼文 21 | 人氣 3 | 評價 80 | 評價/貼文 3.81 | 送出評價 0 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2010/9/30 上午 11:56:23
可能描述的不夠詳細,就是類似在 CorelDraw 繪圖軟體裡,

輸入幾組文字,每組文字是一個物件,點取之後,可以去改變

文字物件的大小,或是顏色,或是字型。

不知在 JavaScript 裡要如何去設定呢?

請前輩們指點,謝謝。
作者 : jackting(MagicJack)
[ 貼文 123 | 人氣 0 | 評價 410 | 評價/貼文 3.33 | 送出評價 10 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2010/10/1 下午 03:06:06
先給個提示:
1. 修改 fontsize(), 傳入物件, 不必動用 getElementById, 直接修改傳入的物件 fontsize.
2. 在標的物件上, 以 this 為參數呼叫 fontsize(), i.e. onclick=fontsize(this)
作者 : picard(picard)
[ 貼文 21 | 人氣 3 | 評價 80 | 評價/貼文 3.81 | 送出評價 0 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2010/10/2 上午 09:34:43
前輩說的仍然無法測試成功,希望前輩多指點迷津。
作者 : jackting(MagicJack)
[ 貼文 123 | 人氣 0 | 評價 410 | 評價/貼文 3.33 | 送出評價 10 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2010/10/4 下午 04:21:01
可能和你最終想要的有一點差距...

範例:

...
<script type="text/javascript">
   var gFntSz = "16pt" ;

   function fontSize(fz) {
     gFntSz = fz;
   }

   function fontSize2(obj) {
     obj.style.fontSize = gFntSz;
   }
</script>

...
    <select onChange="fontSize(this.value);">
     <option value="10pt">10</option>
     <option value="12pt">12</option>
     <option value="14pt">14</option>
     <option value="16pt" selected>16</option>
    </select>

<br><label onClick="fontSize2(this);">台灣是美麗的寶島</label>
<br><label onClick="fontSize2(this);">地球是美麗的行星</label>
<br><label onClick="fontSize2(this);">銀河是美麗的星系</label>
作者 : jackting(MagicJack)
[ 貼文 123 | 人氣 0 | 評價 410 | 評價/貼文 3.33 | 送出評價 10 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2010/10/4 下午 07:18:11
sorry, 操作方法: 先選 fontsize, 再點選要更動的文字
作者 : picard(picard)
[ 貼文 21 | 人氣 3 | 評價 80 | 評價/貼文 3.81 | 送出評價 0 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2010/10/5 上午 08:32:30
多謝 MagicJack 的指導,結果一樣,但方式是倒著做,蠻另類的。

想請教 MagicJack,若先點 Label 文字,再選擇大小,這樣是不是

要將 onClick="fontSize2(this); 對應的方法做改變。

還有,點 Label 文字後,是否可以有外框線,表示作用中呢...
作者 : jackting(MagicJack)
[ 貼文 123 | 人氣 0 | 評價 410 | 評價/貼文 3.33 | 送出評價 10 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2010/10/5 上午 10:18:28
>若先點 Label 文字,再選擇大小,這樣是不是
>要將 onClick='fontSize2(this); 對應的方法做改變。
是的, 整個的實作方式都會改變: 你必需先將點選的東西用 Array 存起來 (就是 fontSize2() 必需要作的), 再作動作.

>還有,點 Label 文字後,是否可以有外框線,表示作用中呢...
要加外框就會有點問題了:
1. 這樣作原本頁面編排位置會有細微的變化, 到最後可能會累積成大變化.
2. css 沒有這樣的修飾屬性, 用 font 不能, 用 text-decoration 也不能, 除非你接受使用其他代表方式
3. 更另類的作法是用 layer 和浮動的方式. 但個人不建議使用, 這只會使你的 click 動作更慢, 程式更不好維護. (如果你不用其他 package 的話)
作者 : picard(picard)
[ 貼文 21 | 人氣 3 | 評價 80 | 評價/貼文 3.81 | 送出評價 0 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2010/10/6 上午 08:27:46
那請教前輩,若想要點取 Label 文字會有外框,而不影響 CSS,

用 JavaScript 是否做得到呢?
作者 : jackting(MagicJack)
[ 貼文 123 | 人氣 0 | 評價 410 | 評價/貼文 3.33 | 送出評價 10 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2010/10/6 下午 12:31:45
問題應該不是 JavaScript 能不能的問題? (因為大部份的 programing language 都可以)

問題所在應該是如何簡單,快速的把問題解決? (用 tool, library, 即有的物件功能 ...還有請高手幫忙)
所以以個人目前能力: 無解 (我對圖形的部份比較沒深入實作).
作者 : jackting(MagicJack)
[ 貼文 123 | 人氣 0 | 評價 410 | 評價/貼文 3.33 | 送出評價 10 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2010/10/6 下午 02:01:51
Sorry,
剛才有找到 border-style 及 border-width 兩個 css style 屬性, 應該可以用.
我試一下再說.
作者 : picard(picard)
[ 貼文 21 | 人氣 3 | 評價 80 | 評價/貼文 3.81 | 送出評價 0 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2010/10/6 下午 05:30:05
謝謝前輩的幫忙,我也試試看其他的方法。
作者 : jackting(MagicJack)
[ 貼文 123 | 人氣 0 | 評價 410 | 評價/貼文 3.33 | 送出評價 10 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2010/10/7 下午 12:22:51
確定可以用, 不過正如之前說的位置會有一點點小偏移.
至於 "點選" 的功能我還在構思及測試中先不 post.

Example 如下:
   function doSel(obj) {
     with (obj) {
     if (style.borderStyle==') {
     style.borderStyle = 'dashed' ;
     style.borderColor = 'red' ;
     style.borderWidth = 1;
     Sels.add(obj);
     } else {
     style.borderStyle = ' ;
     Sels.remove(obj);
     }
     }
   }
...
<br><label onClick="doSel(this);">台灣是美麗的寶島</label>
作者 : jackting(MagicJack)
[ 貼文 123 | 人氣 0 | 評價 410 | 評價/貼文 3.33 | 送出評價 10 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2010/10/7 下午 01:00:35
我把相關的功能 練習用物件的方式寫, 終於...
不過 fontSize() 這個功能還沒想到要如何包進物件中:
想要作一個像 Array.sort() 一樣, 可以自行定義細部動作(改字型, 改顏色 ...)的功能.

<script type="text/javascript">
   var Sels = {
     list:new Array(),
     length:0,
     clear:function() {
     this.length=0;
     this.list=[];
     },
     add:function(obj) {
     if (obj.id=="")
     obj.id = "_dummy"+(this.length++);
     this.list[obj.id] = obj;
     },
     remove:function(obj) {
     delete this.list[obj.id];
     }
   } ;

   function fontSize(fz) {
     for (i in Sels.list) {
     with (Sels.list[i].style) {
     borderStyle = ' ;
     fontSize = fz;
     }
     }
     Sels.clear();
   }

   function doSel(obj) {
     with (obj) {
     if (style.borderStyle==') {
     style.borderStyle = 'dashed' ;
     style.borderColor = 'red' ;
     style.borderWidth = 1;
     Sels.add(obj);
     } else {
     style.borderStyle = ' ;
     Sels.remove(obj);
     }
     }
   }
</script>
作者 : jackting(MagicJack)
[ 貼文 123 | 人氣 0 | 評價 410 | 評價/貼文 3.33 | 送出評價 10 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2010/10/7 下午 06:56:24
O... o..
兩個單引號會被吃掉一個, 太多空白也是.
重 post, 改用雙引號.

<script type="text/javascript">
  var Sels = {
    list:new Array(),
    length:0,
    clear:function() {
     this.length=0;
     this.list=[];
    },
    add:function(obj) {
     if (obj.id=="")
     obj.id = "_dummy"+(this.length++);
     this.list[obj.id] = obj;
    },
    remove:function(obj) {
     delete this.list[obj.id];
    }
  } ;

  function fontSize(fz) {
    for (i in Sels.list) {
     with (Sels.list[i].style) {
     borderStyle = "" ;
     fontSize = fz;
     }
    }
    Sels.clear();
  }

  function doSel(obj) {
    with (obj) {
     if (style.borderStyle=="") {
     style.borderStyle = "dashed" ;
     style.borderColor = "red" ;
     style.borderWidth = 1;
     Sels.add(obj);
     } else {
     style.borderStyle = "" ;
     Sels.remove(obj);
     }
    }
  }
</script>

...
   <select onChange="fontSize(this.value);">
    <option value="10pt">10</option>
    <option value="12pt">12</option>
    <option value="14pt">14</option>
    <option value="16pt" selected>16</option>
   </select>

...
<br><label onClick="doSel(this);">台灣是美麗的寶島</label>
<br><label onClick="doSel(this);">地球是美麗的行星</label>
<br><label onClick="doSel(this);">銀河是美麗的星系</label>
作者 : picard(picard)
[ 貼文 21 | 人氣 3 | 評價 80 | 評價/貼文 3.81 | 送出評價 0 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2010/10/7 下午 07:14:15
MagicJack 好厲害呢,這是我想要的效果,謝謝。

但是,有兩個小問題:

第一次點了 Label 文字有顯示框線,接著要點取
下一個,第一個被選取的文字,應該框線要消失,
目前是連續選取,很有趣呢...但是要一次一個哩。

另外,被選取的文字選擇文字大小,之後框線就會
消失,可不可以選擇文字大小後,該 Label 文字
依然是有框線,直到點取另一個文字才做切換呢...
作者 : jackting(MagicJack)
[ 貼文 123 | 人氣 0 | 評價 410 | 評價/貼文 3.33 | 送出評價 10 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2010/10/11 上午 09:02:59
我寫的是一次可以選多個的, 你是要一次一個?

那剩下的應該不難, 就由你自己完成吧!
我等你回貼結果喔!
 板主 : Clark
 > Java Script - 討論區
 - 最近熱門問答精華集
 - 全部歷史問答精華集
 - Java Script - 知識庫
  ■ 全站最新Post列表
  ■ 我的文章收藏
  ■ 我最愛的作者
  ■ 全站文章收藏排行榜
  ■ 全站最愛作者排行榜
  ■  月熱門主題
  ■  季熱門主題
  ■  熱門主題Top 20
  ■  本區Post排行榜
  ■  本區評價排行榜
  ■  全站專家名人榜
  ■  全站Post排行榜
  ■  全站評價排行榜
  ■  全站人氣排行榜
 請輸入關鍵字 
  開始搜尋
 
Top 10
評價排行
Java Script
1 Snaking 1420 
2 jer 1140 
3 foolface 1080 
4 Clark 970 
5 Milx 960 
6 羅蘋 780 
7 艾里克斯 710 
8 abgne 600 
9 Fillano 500 
10 YnioBa 480 
Java Script
  專家等級 評價  
  一代宗師 10000  
  曠世奇才 5000  
  頂尖高手 3000  
  卓越專家 1500  
  優秀好手 750  
Microsoft Internet Explorer 6.0. Screen 1024x768 pixel. High Color (16 bit).
2000-2019 程式設計俱樂部 http://www.programmer-club.com.tw/
0.09375