【问题标题】:Adding css class through aspx code behind后面通过aspx代码添加css类
【发布时间】:2010-12-26 14:05:24
【问题描述】:

我正在使用 aspx。如果我的 HTML 如下:

<div id="classMe"></div>

我希望通过文件后面的代码动态添加一个css类,即在Page_Load上。有可能吗?

【问题讨论】:

    标签: css class asp.net code-behind


    【解决方案1】:

    如果要添加属性,包括类,需要在标签上设置runat="server"

        <div id="classMe" runat="server"></div>
    

    然后在代码隐藏中:

    classMe.Attributes.Add("class", "some-class")
    

    【讨论】:

    • 谢谢,我确信它会这么简单。
    • @Tyler,没有。这会为控件添加一个新的类名。您还可以在 Attributes 集合上使用 ClearRemovemsdn.microsoft.com/en-US/library/…
    • 我不确定我是否遗漏了什么,但是如果您在初始 div 上有一个类(例如&lt;div id="classMe" runat="server" class="original"&gt;&lt;/div&gt;,则原始类声明将被删除,而您只剩下只是class="some-class" 使用上面的代码....似乎与@chris-haas 的最后一条评论相矛盾
    • 如果您想保留现有的类,您需要执行以下操作:classMe.Attributes.Add("class", classMe.Attributes["class"] + " some-class" 以不覆盖您已有的内容
    • @DevDave 这确实会覆盖现有类,因为您正在更改整个类属性。这与 javascript 中的 setAttribute 相同。 "添加新属性或更改现有属性的值"
    【解决方案2】:

    如果您没有将 id 用于代码隐藏引用以外的任何其他内容(因为 .net 破坏了 id),您可以使用 panel 控件并在您的代码隐藏中引用它:

    <asp:panel runat="server" id="classMe"></asp:panel>
    
    classMe.cssClass = "someClass"
    

    【讨论】:

      【解决方案3】:
      controlName.CssClass="CSS Class Name";
      

      工作示例如下

      txtBank.CssClass = "csError";
      

      【讨论】:

        【解决方案4】:
        BtnAdd.CssClass = "BtnCss";
        

        BtnCss 应该存在于您的 Css 文件中。

        (如果需要,该 Css 文件名的引用应添加到 aspx)

        【讨论】:

          【解决方案5】:

          语法:

          controlName.CssClass="CSS Class Name";
          

          例子:

          txtBank.CssClass = "csError";
          

          【讨论】:

            【解决方案6】:

            假设你的 div 已经有一些 CSS 类...

            <div id="classMe" CssClass="first"></div>
            

            以下内容不会替换现有定义:

            ClassMe.CssClass += " second";
            

            如果你直到最后一刻才确定......

            string classes = ClassMe.CssClass;
            ClassMe.CssClass += (classes == "") ? "second" : " second";
            

            【讨论】:

              猜你喜欢
              • 2012-04-04
              • 1970-01-01
              • 2012-03-15
              • 1970-01-01
              • 2013-06-13
              • 2013-12-27
              • 2017-03-29
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多