ASP.NET如何讓Test按條件設定顯示不同顏色?

asp.net

REX0713 2019-12-27 14:03:10 ‧ 1966 瀏覽

分享至

我是ASP.NET新新新手，還請各位邦友幫忙一下!!!

```Default.aspx
<table id="Table_V" runat="server" rules="all" style="border-width: 8px; border-style: ridge; border-color: green; word-break: keep-all" aria-hidden="False">
  <tr class="auto-style72">
    <td>批號</td>
    <td>卷號</td>
    <td>品名</td>
    .
    .
    .
    <td>銅厚度A面</td>
    <td>銅厚度B面</td>
    .
    .
    .
  </tr>
  <tr class="auto-style37">
    <td class="auto-style37"><asp:TextBox ID="批號" runat="server" CssClass="auto-style87" MaxLength="14" TabIndex="1" Type="TextBox" Width="110px"></asp:TextBox></td>
    <td><asp:TextBox ID="卷號" runat="server" CssClass="auto-style88" MaxLength="11" TabIndex="100" Type="TextBox" Width="110px"></asp:TextBox></td>
    <td><asp:TextBox ID="品名" runat="server" CssClass="auto-style88" MaxLength="10" TabIndex="100" Type="TextBox" Width="110px"></asp:TextBox></td>
    .
    .
    .
    <td>
      <asp:TextBox ID="銅厚度A面" runat="server" CssClass="auto-style92" MaxLength="5" TabIndex="100" Type="TextBox" Width="80px"></asp:TextBox>
        <script>
            if ($("#品名").val() == '1234') {
               if ($("#銅厚度A面").val() = 14.4 <= && <= 17.6) { BackColor = "E7E7FF" };
               if ($("#銅厚度A面").val() = 13.6 <= && < 14.4) { ForeColor = "CCCCCC" };
               if ($("#銅厚度A面").val() = 17.6 < && <= 18.4) { BorderColor = "#00CCFF" };
               if ($("#銅厚度A面").val() = < 13.6 && > 18.4) { CssClass = "auto-style97" };
            }
        </script>
    </td>
    <td>
      <asp:TextBox ID="銅厚度B面" runat="server" CssClass="auto-style92" MaxLength="5" TabIndex="100" Type="TextBox" Width="80px"></asp:TextBox>
        <script>
            if ($("#品名").val() == '1234') {
               if ($("#銅厚度B面").val() = 14.4 <= && <= 17.6) { BackColor = "E7E7FF" };
               if ($("#銅厚度B面").val() = 13.6 <= && < 14.4) { ForeColor = "CCCCCC" };
               if ($("#銅厚度B面").val() = 17.6 < && <= 18.4) { BorderColor = "#00CCFF" };
               if ($("#銅厚度B面").val() = < 13.6 && > 18.4) { CssClass = "auto-style97" };
            }
        </script>
    </td>
    .
    .
    .
  </tr>
</table>

想要依照品名不同
銅厚度A面輸入資料不同，所顯示背景色不同
銅厚度B面輸入資料不同，所顯示背景色不同

sion iT邦新手 4 級 ‧ 2019-12-27 14:49:05 檢舉

看標題我還以為是unittest勒
原來是textbox阿

REX0713 iT邦新手 5 級 ‧ 2019-12-27 15:22:09 檢舉

抱歉!!!
讓您誤解了...

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

舜~

iT邦高手 1 級 ‧ 2019-12-27 14:27:10

最佳解答

1.jquery改顏色的語法
$("body").css("background-color" , "#E7E7FF");

2.id要使用<%= 銅厚度B面.ClientID %>，因為"銅厚度B面"這名稱是asp.net的元件id，不是html的元件id，所以你的jquery不會觸發(因為找不到元件)

<script>
if ($("#<%= 品名.ClientID %>").val() == '1234') {
    if ($("#<%= 銅厚度B面.ClientID %>").val() = 14.4 <= && <= 17.6) {
        $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#E7E7FF");
    }
    if ($("#<%= 銅厚度B面.ClientID %>").val() = 13.6 <= && < 14.4) {
        $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#CCCCCC");
    }
    if ($("#<%= 銅厚度B面.ClientID %>").val() = 17.6 < && <= 18.4) {
        $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#00CCFF");
    }
    if ($("#<%= 銅厚度B面.ClientID %>").val() = < 13.6 && > 18.4) {
        $("#<%= 銅厚度B面.ClientID %>").addClass("auto-style97");
    }
}
</script>

問一下jquery有 if(xx= 14.4 <= && <= 17.6)) 這種寫法?

回應 20
分享
檢舉

看更多先前的回應...收起先前的回應...

REX0713 iT邦新手 5 級 ‧ 2019-12-27 15:12:40 檢舉

"問一下jquery有 if(xx= 14.4 <= && <= 17.6)) 這種寫法?"

抱歉!!!那是我自己想的還再確認中...

REX0713 iT邦新手 5 級 ‧ 2019-12-27 15:16:09 檢舉

if ($("#<%= 品名.ClientID %>").val() == '1234') {
  if ($("#<%= 銅厚度B面.ClientID %>").val() = 14.4 <= && <= 17.6) {
    $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#E7E7FF");
}

<%與%>為註解符號
好像寫在那符號內的都不會執行

舜~ iT邦高手 1 級 ‧ 2019-12-27 15:33:02 檢舉

<% ... %> 包在裡面的code可直接執行，就像寫在.cs裡的效果一樣
<%-- ... --%> 這個才是註解

可參考這篇
[ASP.NET]常見用於aspx網頁的tags

REX0713 iT邦新手 5 級 ‧ 2019-12-27 16:03:34 檢舉

抱歉...沒驗測
那我再試試看...
感謝您...

REX0713 iT邦新手 5 級 ‧ 2020-01-02 16:02:02 檢舉

舜大大
目前我用這樣下去後
有抓到"品名"的資料了

if ($("#<%= 品名.ClientID %>").val() == '1234') {
  if ($("#<%= 銅厚度B面.ClientID %>").val() >= 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#66FF66"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() <= 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#66FF66"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() >= 13.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() < 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() > 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() <= 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() < 13.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FF5511"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() > 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FF5511"); }
}

用這樣的話
品名為"1234"的時後，銅厚度B面"background-color"會變成"#66FF66"顏色
但是我輸入"銅厚度B面"資料後背景顏色還是"#66FF66"顏色

舜~ iT邦高手 1 級 ‧ 2020-01-02 16:40:08 檢舉

您可以加上else
if ($("#<%= 品名.ClientID %>").val() == '1234') {...}
else{
// 恢復預設值
}

REX0713 iT邦新手 5 級 ‧ 2020-01-03 09:18:33 檢舉

舜大大
我改成這樣

if ($("#<%= 品名.ClientID %>").val() == '1234') {
  if ($("#<%= 銅厚度B面.ClientID %>").val() == "") { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFFFFF"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() >= 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#66FF66"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() <= 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#66FF66"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() >= 13.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() < 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() > 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() <= 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() < 13.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FF5511"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() > 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FF5511"); }
}

現在好像是無法確認"銅厚度B面"的資料
我不管有無輸入都是白色(#FFFFFF)

舜~ iT邦高手 1 級 ‧ 2020-01-03 14:26:35 檢舉

改這樣呢?

if ($("#<%= 品名.ClientID %>").val() == '1234') {
  if ($("#<%= 銅厚度B面.ClientID %>").val() >= 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#66FF66"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() <= 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#66FF66"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() >= 13.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() < 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() > 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() <= 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() < 13.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FF5511"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() > 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FF5511"); }
  else {
      $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFFFFF");
  }
}
else {
   $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFFFFF");
}

REX0713 iT邦新手 5 級 ‧ 2020-01-03 14:48:34 檢舉

if ($("#<%= 品名.ClientID %>").val() == '1234') {
  if ($("#<%= 銅厚度B面.ClientID %>").val() >= 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#66FF66"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() <= 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#66FF66"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() >= 13.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() < 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() > 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() <= 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() < 13.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FF5511"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() > 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FF5511"); }
  else { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFFFFF"); }
}
else { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFFFFF"); }

改成這樣
確認品名為"1234"後，銅厚度B面"background-color"就變成"#66FF66"
不管有無輸入資料皆不會變更顏色

舜~ iT邦高手 1 級 ‧ 2020-01-03 18:17:41 檢舉

您看一下您第二層if的條件
由上而下(優先順序)分別為

條件	顏色
`>= 14.4`	#66FF66
`<= 17.6`	#66FF66
`>= 13.6`	#FFDD55
`< 14.4`	#FFDD55
`< 17.6`	#FFDD55
`<= 18.4`	#FFDD55
`< 13.6`	#FF5511
`> 18.4`	#FF5511
`以上都配對不到`	#FFFFFF

舜~ iT邦高手 1 級 ‧ 2020-01-03 18:21:16 檢舉

>= 14.4 與 <= 17.6 這兩個條件排下來就已經通吃所有可能了，所以您的順序需要調整才行
或是您改成這樣
if (XXX >= 14.4 && XXX < 17.6 ){ ... }

REX0713 iT邦新手 5 級 ‧ 2020-01-07 16:24:40 檢舉

我目前按照數字大小排序

if ($("#<%= 品名.ClientID %>").val() == '1234') {
  if ($("#<%= 銅厚度B面.ClientID %>").val() < 13.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FF5511"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() >= 13.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() < 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() >= 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#66FF66"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() <= 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#66FF66"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() > 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() <= 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() > 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FF5511"); }
  else { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFFFFF"); }
}
else { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFFFFF"); }

確認品名為"1234"後，銅厚度B面"background-color"就變成"#FF5511"
不管有無輸入資料皆不會變更顏色

再麻煩了...

舜~ iT邦高手 1 級 ‧ 2020-01-07 22:41:01 檢舉

試試這樣

if ($("#<%= 品名.ClientID %>").val() == '1234') {
	var myValue = $("#<%= 銅厚度B面.ClientID %>").val();
	if ( 14.4 <= myValue && myValue <= 17.6) {
		$("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#66FF66");
	}
	if ( 13.6 <= myValue && myValue < 14.4) {
		$("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55");
	}
	if ( 17.6 < myValue && myValue <= 18.4) {
		$("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55");
	}
	if ( myValue < 13.6 && myValue > 18.4) {
		$("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FF5511");
	};
}
else {
   $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFFFFF");
}

REX0713 iT邦新手 5 級 ‧ 2020-01-08 10:39:51 檢舉

使用這樣

if ($("#<%= 品名.ClientID %>").val() == '1234') {
  var myValue = $("#<%= 銅厚度B面.ClientID %>").val();
  if ($("#<%= 銅厚度B面.ClientID %>").val() <= 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#66FF66"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() < 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() <= 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() > 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FF5511"); }
  else { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFFFFF"); }
}
else { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFFFFF"); }

一樣...確認品名為"1234"後，銅厚度B面"background-color"就變成"#66FF66"
不管有無輸入資料皆不會變更顏色

REX0713 iT邦新手 5 級 ‧ 2020-01-08 10:42:03 檢舉

使用這樣

if ($("#<%= 品名.ClientID %>").val() == 'N1222') {
  var myValue = $("#<%= 銅厚度B面.ClientID %>").val();
  if ($("#<%= 銅厚度B面.ClientID %>").val() >= 14.4 && <= 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#66FF66"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() >= 13.6 && < 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() > 17.6 && <= 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
  else if ($("#<%= 銅厚度B面.ClientID %>").val() < 13.6 && > 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FF5511"); }
  else { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFFFFF"); }
}
else { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFFFFF"); }

就完全不行...都是白色
品名確定與否都是
銅厚度B面資料有無輸入也皆是白色

舜~ iT邦高手 1 級 ‧ 2020-01-08 11:23:27 檢舉

if(xx= 14.4 <= && <= 17.6)) 這寫法瀏覽器就不會理你了...會跳過整段javascript

let myValue = $("#<%= 銅厚度B面.ClientID %>").val();
我多一個變數myValue放這個$("#<%= 銅厚度B面.ClientID %>").val()是因為一堆這個加起來，看起來有點亂XD

沒看邏輯，微調一下語法

if ($("#<%= 品名.ClientID %>").val() == 'N1222') {
  let myValue = $("#<%= 銅厚度B面.ClientID %>").val();
  if (myValue >= 14.4 && myValue<= 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#66FF66"); }
  else if (myValue >= 13.6 && myValue< 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
  else if (myValue > 17.6 && myValue<= 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
  else if (myValue < 13.6 && myValue> 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FF5511"); }
  else { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFFFFF"); }
}
else { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFFFFF"); }

REX0713 iT邦新手 5 級 ‧ 2020-01-08 14:12:51 檢舉

目前改成這樣算是最完善的了

if ($("#<%= 品名.ClientID %>").val() == '1234') {
  let myValue = $("#<%= 銅厚度B面.ClientID %>").val();
  if (myValue < 13.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FF5511"); }
  else if (myValue >= 13.6 && myValue < 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
  else if (myValue >= 14.4 && myValue <= 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#66FF66"); }
  else if (myValue > 17.6 && myValue <= 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
  else if (myValue > 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FF5511"); }
}

只是"銅厚度B面"要先輸入資料後再填入"品名"資料

謝謝大大協助...

REX0713 iT邦新手 5 級 ‧ 2020-01-08 15:52:00 檢舉

舜大大
再問一個小問題

假設品名資料
A1222
B1222
C1222
D1222
AB1222
B1222CD

if ($("#<%= 品名.ClientID %>").val() == '1222')

我要如何讓它皆適用條件式規則???

舜~ iT邦高手 1 級 ‧ 2020-01-08 17:00:24 檢舉

方法一土法煉鋼(推薦)

if (
$("#<%= 品名.ClientID %>").val() == 'A1222' ||
$("#<%= 品名.ClientID %>").val() == 'B1222' ||
$("#<%= 品名.ClientID %>").val() == 'C1222' ||
$("#<%= 品名.ClientID %>").val() == 'D1222' ||
$("#<%= 品名.ClientID %>").val() == 'AB1222' ||
$("#<%= 品名.ClientID %>").val() == 'B1222CD'
)

方法二用正則表示式，只要有1222字眼的都篩選

if ($("#<%= 品名.ClientID %>").val().match(/1222/))

推薦土法煉鋼，不然過陣子再回頭看您自己的程式怕您看不懂...

REX0713 iT邦新手 5 級 ‧ 2020-01-09 14:04:03 檢舉

舜大
感謝您協助...

登入發表回應

YoChen

iT邦研究生 1 級 ‧ 2019-12-27 17:05:13

建議您，在Web Form的專案內，
如果還沒辦法很清楚的分辨前後端，
盡量就讓邏輯都控制在Server端。

JQuery並非不能使用，
但是如果您還沒辦法分辨aspx裡面哪些部分是需要Server端解析的，
那就還是先將邏輯都放在aspx.cs會比較好，
不然隨便Postback一次都會讓你很痛苦~XDDD

以下提供您一個簡單的範例參考~

由於控制項本身沒辦法加Style，只能夠加Class，因此我們先將會用到的css建好

.style1 {
    background-color:cornflowerblue;
}
.style2 {
    background-color:lightgreen;
}
.default {
    background-color:orange;
}

接著我們在我們的控制項上面加上Text Changed的Event Handler，
OnTextChanged="TextBox1_TextChanged"

<asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_TextChanged" CssClass="default"></asp:TextBox>

最後在aspx.cs處理事件

protected void TextBox1_TextChanged(object sender, EventArgs e)
{
    int labelInt = int.Parse(TextBox1.Text);

    if (labelInt > 10)
    {
        TextBox1.CssClass = "style1";
    }
    else if (labelInt > 5)
    {
        TextBox1.CssClass = "style2";
    }
    else
    {
        TextBox1.CssClass = "default";
    }
}

結果就會像這樣
Sample
最後提醒一下，不要再用中文命名了，不然以後會出現很多意想不到的問題~XDDD