将CSS类添加到后面的代码中的div

时间：2022-11-22 23:06:56

I have a div and I am trying to add a CSS class to it in code but I receive the following error when I try

我有一个div，我试图在代码中添加一个CSS类，但我尝试时收到以下错误

Property or indexer 'System.Web.UI.HtmlControls.HtmlControl.Style' cannot be assigned to -- it is read only

I am using the following code:

我使用以下代码：

protected void BTNEvent_Click(object sender, ImageClickEventArgs e)
{
    BtnventCss.Style= "hom_but_a";                 
}

Can anyone please help me?

谁能帮帮我吗？

7 个解决方案

#1

46  

What if:

如果：

 <asp:Button ID="Button1" runat="server" CssClass="test1 test3 test-test" />

To add or remove a class, instead of overwriting all classes with

添加或删除类，而不是覆盖所有类

   BtnventCss.CssClass = "hom_but_a"

keep the HTML correct:

保持HTML正确：

    string classname = "TestClass";

    // Add a class
    BtnventCss.CssClass = String.Join(" ", Button1
               .CssClass
               .Split(' ')
               .Except(new string[]{"",classname})
               .Concat(new string[]{classname})
               .ToArray()
       );

     // Remove a class
     BtnventCss.CssClass = String.Join(" ", Button1
               .CssClass
               .Split(' ')
               .Except(new string[]{"",classname})
               .ToArray()
       );

This assures

这保证了

  • The original classnames remain.
  • 原始的类名仍然存在。
  • There are no double classnames
  • 没有双重名字
  • There are no disturbing extra spaces
  • 没有令人不安的额外空间

Especially when client-side development is using several classnames on one element.

特别是当客户端开发在一个元素上使用多个类名时。

In your example, use

在您的示例中，使用

   string classname = "TestClass";

    // Add a class
    Button1.Attributes.Add("class", String.Join(" ", Button1
               .Attributes["class"]
               .Split(' ')
               .Except(new string[]{"",classname})
               .Concat(new string[]{classname})
               .ToArray()
       ));

     // Remove a class
     Button1.Attributes.Add("class", String.Join(" ", Button1
               .Attributes["class"]
               .Split(' ')
               .Except(new string[]{"",classname})
               .ToArray()
       ));

You should wrap this in a method/property ;)

你应该将它包装在方法/属性中;）

#2

30  

<div runat="server"> is mapped to a HtmlGenericControl. Try using BtnventCss.Attributes.Add("class", "hom_but_a");

映射到HtmlGenericControl。尝试使用BtnventCss.Attributes.Add（“class”，“hom_but_a”）;

#3

7  

The Style property gets a collection of all the cascading style sheet (CSS) properties; you cannot set it.

Style属性获取所有级联样式表（CSS）属性的集合;你不能设置它。

Try BtnventCss.CssClass = "hom_but_a"; instead.

试试BtnventCss.CssClass =“hom_but_a”;代替。

I'm assuming BtnventCss is a WebControl.

我假设BtnventCss是一个WebControl。

I have just seen you're probably using <div runat="server"...

我刚看到你可能正在使用

If so, you can try:

如果是这样，您可以尝试：

BtnventCss.Attributes.Add("class", "hom_but_a");

You could make the div an asp:panel - they will render the same and you'll get better server-side support.

您可以将div设为asp：panel - 它们将呈现相同的内容，您将获得更好的服务器端支持。

#4

5  

For a non ASP.NET control, i.e. HTML controls like div, table, td, tr, etc. you need to first make them a server control, assign an ID, and then assign a property from server code:

对于非ASP.NET控件，即div，table，td，tr等HTML控件，您需要首先使它们成为服务器控件，分配ID，然后从服务器代码中分配属性：

ASPX page

<head>
    <style type="text/css">
        .top_rounded
        {
            height: 75px;
            width: 75px;
            border: 2px solid;
            border-radius: 5px;
            -moz-border-radius: 5px; /* Firefox 3.6 and earlier */
            border-color: #9c1c1f;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div runat="server" id="myDiv">This is my div</div>
    </form>
</body>

CS page

myDiv.Attributes.Add("class", "top_rounded");

#5

3  

Here are two extension methods you can use. They ensure any existing classes are preserved and do not duplicate classes being added.

您可以使用以下两种扩展方法。它们确保保留任何现有类，并且不重复添加的类。

public static void RemoveCssClass(this WebControl control, String css) {
  control.CssClass = String.Join(" ", control.CssClass.Split(' ').Where(x => x != css).ToArray());
}

public static void AddCssClass(this WebControl control, String css) {
  control.RemoveCssClass(css);
  css += " " + control.CssClass;
  control.CssClass = css;
}

Usage: hlCreateNew.AddCssClass("disabled");

用法：hlCreateNew.AddCssClass（“禁用”）;

Usage: hlCreateNew.RemoveCssClass("disabled");

用法：hlCreateNew.RemoveCssClass（“disabled”）;

#6

1  

To ADD classes to html elements see how to add css class to html generic control div?. There are answers similar to those given here but showing how to add classes to html elements.

要将类添加到html元素，请参阅如何将css类添加到html泛型控制div？。有类似于这里给出的答案，但显示如何向html元素添加类。

#7

1  

Button1.CssClass += " newClass";

This will not erase your original classes for that control. Try this, it should work.

这不会删除该控件的原始类。试试这个，它应该工作。

#1

46  

What if:

如果：

 <asp:Button ID="Button1" runat="server" CssClass="test1 test3 test-test" />

To add or remove a class, instead of overwriting all classes with

添加或删除类，而不是覆盖所有类

   BtnventCss.CssClass = "hom_but_a"

keep the HTML correct:

保持HTML正确：

    string classname = "TestClass";

    // Add a class
    BtnventCss.CssClass = String.Join(" ", Button1
               .CssClass
               .Split(' ')
               .Except(new string[]{"",classname})
               .Concat(new string[]{classname})
               .ToArray()
       );

     // Remove a class
     BtnventCss.CssClass = String.Join(" ", Button1
               .CssClass
               .Split(' ')
               .Except(new string[]{"",classname})
               .ToArray()
       );

This assures

这保证了

  • The original classnames remain.
  • 原始的类名仍然存在。
  • There are no double classnames
  • 没有双重名字
  • There are no disturbing extra spaces
  • 没有令人不安的额外空间

Especially when client-side development is using several classnames on one element.

特别是当客户端开发在一个元素上使用多个类名时。

In your example, use

在您的示例中，使用

   string classname = "TestClass";

    // Add a class
    Button1.Attributes.Add("class", String.Join(" ", Button1
               .Attributes["class"]
               .Split(' ')
               .Except(new string[]{"",classname})
               .Concat(new string[]{classname})
               .ToArray()
       ));

     // Remove a class
     Button1.Attributes.Add("class", String.Join(" ", Button1
               .Attributes["class"]
               .Split(' ')
               .Except(new string[]{"",classname})
               .ToArray()
       ));

You should wrap this in a method/property ;)

你应该将它包装在方法/属性中;）

#2

30  

<div runat="server"> is mapped to a HtmlGenericControl. Try using BtnventCss.Attributes.Add("class", "hom_but_a");

映射到HtmlGenericControl。尝试使用BtnventCss.Attributes.Add（“class”，“hom_but_a”）;

#3

7  

The Style property gets a collection of all the cascading style sheet (CSS) properties; you cannot set it.

Style属性获取所有级联样式表（CSS）属性的集合;你不能设置它。

Try BtnventCss.CssClass = "hom_but_a"; instead.

试试BtnventCss.CssClass =“hom_but_a”;代替。

I'm assuming BtnventCss is a WebControl.

我假设BtnventCss是一个WebControl。

I have just seen you're probably using <div runat="server"...

我刚看到你可能正在使用

If so, you can try:

如果是这样，您可以尝试：

BtnventCss.Attributes.Add("class", "hom_but_a");

You could make the div an asp:panel - they will render the same and you'll get better server-side support.

您可以将div设为asp：panel - 它们将呈现相同的内容，您将获得更好的服务器端支持。

#4

5  

For a non ASP.NET control, i.e. HTML controls like div, table, td, tr, etc. you need to first make them a server control, assign an ID, and then assign a property from server code:

对于非ASP.NET控件，即div，table，td，tr等HTML控件，您需要首先使它们成为服务器控件，分配ID，然后从服务器代码中分配属性：

ASPX page

<head>
    <style type="text/css">
        .top_rounded
        {
            height: 75px;
            width: 75px;
            border: 2px solid;
            border-radius: 5px;
            -moz-border-radius: 5px; /* Firefox 3.6 and earlier */
            border-color: #9c1c1f;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div runat="server" id="myDiv">This is my div</div>
    </form>
</body>

CS page

myDiv.Attributes.Add("class", "top_rounded");

#5

3  

Here are two extension methods you can use. They ensure any existing classes are preserved and do not duplicate classes being added.

您可以使用以下两种扩展方法。它们确保保留任何现有类，并且不重复添加的类。

public static void RemoveCssClass(this WebControl control, String css) {
  control.CssClass = String.Join(" ", control.CssClass.Split(' ').Where(x => x != css).ToArray());
}

public static void AddCssClass(this WebControl control, String css) {
  control.RemoveCssClass(css);
  css += " " + control.CssClass;
  control.CssClass = css;
}

Usage: hlCreateNew.AddCssClass("disabled");

用法：hlCreateNew.AddCssClass（“禁用”）;

Usage: hlCreateNew.RemoveCssClass("disabled");

用法：hlCreateNew.RemoveCssClass（“disabled”）;

#6

1  

To ADD classes to html elements see how to add css class to html generic control div?. There are answers similar to those given here but showing how to add classes to html elements.

要将类添加到html元素，请参阅如何将css类添加到html泛型控制div？。有类似于这里给出的答案，但显示如何向html元素添加类。

#7

1  

Button1.CssClass += " newClass";

This will not erase your original classes for that control. Try this, it should work.

这不会删除该控件的原始类。试试这个，它应该工作。

标签：

相关文章