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
'IT박스' 카테고리의 다른 글
sqlite 한 테이블에서 다른 테이블로 데이터 복사 (0) | 2020.11.17 |
---|---|
CouchDB 복제 프로토콜은 무엇입니까? (0) | 2020.11.17 |
INSERT… RETURNING의 반환 값을 다른 INSERT에서 사용할 수 있습니까? (0) | 2020.11.17 |
Windows Batch Command를 사용하여 Jenkins에서 환경 변수를 어떻게 사용합니까? (0) | 2020.11.17 |
Moment.js는 날짜에서 요일 이름을 얻습니다. (0) | 2020.11.17 |