使用javascript更改css使用javascript

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Javascript._Default" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<script language="javascript" type="text/javascript"> 
    function ClearValue() { 

      var txtName = document.getElementById('<%=txtName.ClientID %>'); 
      txtName.value = hidden.value 
       txtName.className = '' 
       txtName.className = 'TextBox2' 

      } 
     } 
    </script> 

<html xmlns="http://www.w3.org/1999/xhtml" > 

<head runat="server"> 
    <title></title> 
    <style type="text/css"> 
    .TextBox 
{ 
    width: 150px; 
    border: Solid 1px MistyRose; 
    font-family: Verdana; 
    font-style: normal; 
    color: #333333; 
    text-decoration: none; 
    font-size: 0.8em; 
} 

.TextBox2 
{ 
    width: 300px; 
    border: Solid 6px MistyRose; 
    font-family: Verdana; 
    font-style: normal; 
    color: #000000; 
    text-decoration: none; 
    font-size: 0.3em; 
} 
    </style> 
</head> 

<body> 
    <form id="form1" runat="server"> 
    <div> 
     <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="javascript:ClearValue()" /> 
     <asp:TextBox ID="txtName" runat="server" CssClass="TextBox"></asp:TextBox> 
     <br /> 
    </div> 
    </form> 
</body> 
</html>

這裏我試圖改變使用JavaScript的文本框的CSS。使用javascript更改css使用javascript

這是不會發生任何想法如何解決這個問題

感謝

來源

2010-10-03 happysmile

作爲一個經驗法則，當你有語言A（.NET這裏）動態輸出語言B（JavaScript在這裏會），在調試的第一步應該是檢查生成的代碼。然後你的問題變成「爲什麼.NET會輸出這個而不是那個？」或者「爲什麼JavaScript會失敗？」 - 這個答案要容易得多（並且讓更多的人回答，因爲它不需要兩種語言的知識）。 – Quentin 2010-10-03 19:07:13

您的腳本可能停止，因爲沒有hidden價值的任何地方。

腳本結尾處還有一個額外的}。

這應該工作：

function ClearValue() { 
    var txtName = document.getElementById('<%=txtName.ClientID %>'); 
    txtName.className = ''; 
    txtName.className = 'TextBox2'; 
}

思想，這也將在現代瀏覽器中正常工作（雖然打破了舊版本的IE，感謝@David Dorward）：

function ClearValue() { 
    var txtName = document.getElementById('<%=txtName.ClientID %>'); 
    txtName.setAttribute('class', ''); 
    txtName.setAttribute('class', 'TextBox2'); 
}

你真的應該嘗試使用jQuery這使得這種事情變得輕而易舉：

function ClearValue() 
{ 
    $('<%=txtName.ClientID %>').toggleClass('TextBox2'); 
}

來源

2010-10-03 19:06:34 Oded

使用'setAttribute'將無法正常工作。它在舊版本的IE中被破解。 – Quentin 2010-10-03 19:21:17

@David Dorward - 感謝您的糾正。答案已更新。 – Oded 2010-10-03 19:23:20

可以downvote請解釋一下嗎？ – Oded 2010-10-03 19:30:22

-1

嘗試

txtName.setAttribute("class",'TextBox2);

來源

2010-10-03 19:06:58 frisco

'className'屬性（在原始問題中使用）比'setAttribute'更好的支持 – Quentin 2010-10-03 19:20:40

-1

   txtname.setAttribute("className", newClass); //For IE; harmless to other browsers.

從http://www.webdeveloper.com/forum/showthread.php?t=134282

來源

2010-10-03 19:07:22 Hulk

使用'className'屬性（正如原來的問題所做的那樣）而不是'setAttribute'方法避免了破解舊版本IE以這種方式。 – Quentin 2010-10-03 19:20:09

使用javascript更改css使用javascript

回答

相關問題