IT박스

HTML 일반 제어 div에 CSS 클래스를 추가하는 방법은 무엇입니까?

itboxs 2020. 11. 17. 07:55
반응형

HTML 일반 제어 div에 CSS 클래스를 추가하는 방법은 무엇입니까?


다음과 같은 div 태그를 만들었습니다.

System.Web.UI.HtmlControls.HtmlGenericControl dynDiv = 
    new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");

다음과 같이 div 태그에 스타일을 추가했습니다.

dynDiv.Style.Add(HtmlTextWriterStyle.BorderStyle, "1px solid #DBE0E4");
dynDiv.Style.Add(HtmlTextWriterStyle.Height, "auto");
dynDiv.Style.Add(HtmlTextWriterStyle.MarginTop, "5px");
dynDiv.Style.Add(HtmlTextWriterStyle.PaddingBottom, "5px");
dynDiv.Style.Add(HtmlTextWriterStyle.Width, "682px");

하지만 folder에있는 외부 CSS 파일을 통해 div 태그의 스타일을 제어해야합니다 ~/css/maincss.css.

해당 파일의 CSS를이 div에 어떻게 적용 할 수 있습니까?


dynDiv.Attributes["class"] = "myCssClass";

HtmlGenericControl사용할 수 있는 방식으로 생성 된 div에 클래스를 추가하려면 다음을 수행하십시오 .

div1.Attributes.Add("class", "classname"); 

Panel옵션을 사용하는 경우 다음과 같습니다.

panel1.CssClass = "classname";

요소에 대한 기존 클래스 목록에 클래스를 추가하려는 경우 :

element.Attributes.Add("class", element.Attributes["class"] + " " + sType);

내 접근 방식은 다음과 같습니다.

/// <summary>
/// Appends CSS Class seprated by a space character
/// </summary>
/// <param name="control">Target control</param>
/// <param name="cssClass">CSS class name to append</param>
public static void AppendCss(HtmlGenericControl control, string cssClass)
{
    // Ensure CSS class is definied
    if (string.IsNullOrEmpty(cssClass)) return;

    // Append CSS class
    if (string.IsNullOrEmpty(control.Attributes["class"]))
    {
        // Set our CSS Class as only one
        control.Attributes["class"] = cssClass;
    }
    else
    {
        // Append new CSS class with space as seprator
        control.Attributes["class"] += (" " + cssClass);
    }
}

Curt의 대답은 옳다고 생각하지만 ASP.NET 코드에서 이미 선언 된 클래스가있는 div에 클래스를 추가하려면 어떻게해야합니까?

여기에 대한 내 솔루션이 있습니다. 일반 메서드이므로 다음과 같이 직접 호출 할 수 있습니다.

ASP Net Div 선언 :

<div id="divButtonWrapper" runat="server" class="text-center smallbutton fixPad">

클래스를 추가하는 코드 :

divButtonWrapper.AddClassToHtmlControl("nameOfYourCssClass")

일반 클래스 :

public static class HtmlGenericControlExtensions
{
    public static void AddClassToHtmlControl(this HtmlGenericControl htmlGenericControl, string className)
    {
        if (string.IsNullOrWhiteSpace(className))
            return;

        htmlGenericControl
            .Attributes.Add("class", string.Join(" ", htmlGenericControl
            .Attributes["class"]
            .Split(' ')
            .Except(new[] { "", className })
            .Concat(new[] { className })
            .ToArray()));
    }
}

If you're going to be repeating this, might as well have an extension method:

// appends a string class to the html controls class attribute
public static void AddClass(this HtmlControl control, string newClass)
{
    if (control.Attributes["class"].IsNotNullAndNotEmpty())
    {
        control.Attributes["class"] += " " + newClass;
    }
    else
    {
        control.Attributes["class"] = newClass;
    }
}

You don't add the css file to the div, you add a class to it then put your import at the top of the HTML page like so:

<link href="../files/external.css" rel="stylesheet" type="text/css" />

Then add a class like the following to your code: 'myStyle'.

Then in the css file do something like:

.myStyle
{
   border-style: 1px solid #DBE0E4;
}

Alternative approach if you want to add a class to an existing list of classes of an element:

element.Attributes["class"] += " myCssClass";

How about an extension method?

Here I have a show or hide method. Using my CSS class hidden.

public static class HtmlControlExtensions
{
    public static void Hide(this HtmlControl ctrl)
    {
        if (!string.IsNullOrEmpty(ctrl.Attributes["class"]))
        {
            if (!ctrl.Attributes["class"].Contains("hidden"))
                ctrl.Attributes.Add("class", ctrl.Attributes["class"] + " hidden");
        }
        else
        {
            ctrl.Attributes.Add("class", "hidden");
        }
    }

    public static void Show(this HtmlControl ctrl)
    {
        if (!string.IsNullOrEmpty(ctrl.Attributes["class"]))
            if (ctrl.Attributes["class"].Contains("hidden"))
                ctrl.Attributes.Add("class", ctrl.Attributes["class"].Replace("hidden", ""));
    }
}

Then when you want to show or hide your control:

myUserControl.Hide();

//... some other code

myUserControl.Show();

참고URL : https://stackoverflow.com/questions/6517405/how-to-add-css-class-to-html-generic-control-div

반응형