How to Change an Element Style On The Client

• Feb 05, 2024
• 2 minutes to read

This topic describes different ways to change element styles in DevExpress controls on the client side.

Change a Style of The Main Element

Most DevExpress controls have the client GetMainElement method that returns the root HTML element of the control. You can use this element to change the style of a simple control, such as ASPxButton or ASPxImage.

ASPX

<dx:ASPxButton ID="btn" runat="server" Text="Some Text Here..." ClientInstanceName="button"  />
<dx:ASPxImage ID="img" runat="server" ImageUrl="../myImg.jpg" ClientInstanceName="image" Width="100px"/>

JS

var buttonElement = button.GetMainElement();
buttonElement.style.backgroundColor = "Black";
buttonElement.style.color = "Green";

var imageElement = image.GetMainElement();
imageElement.style.border = "thick solid #d12501";

Note

When an element has a background image, it overlaps the applied background color. Refer to the following article for details: How to correctly apply a custom background color to a specific visual element of the themed control or extension.

Change a Style of The Input Element

Call the GetInputElement method to get an editor’s HTML <input> element. Use this element to customize input style settings.

ASPX

<dx:ASPxTextBox ID="tb" runat="server" ClientInstanceName="textBox" />

JS

var tbInputElement = textBox.GetInputElement();
tbInputElement.style.color = "Gray";
tbInputElement.style.cursor = "not-allowed";
tbInputElement.readOnly = true;

Change a Style of a Control’s Inner Element

You can apply a custom CSS class to every element that have the CssClass property, find this element by class name on the client, and modify the element’s style settings. To implement this technique, follow the steps below:

1. Apply a custom CSS class to an element.

   ASPX

   <dx:ASPxDockPanel ID="ASPxDockPanel1" runat="server" ClientInstanceName="dockPanel" ...>
       <Styles>
           <Header CssClass="dpHeader" />
       </Styles>
       ...
   </dx:ASPxDockPanel>
   

2. On the client, call the getElementsByClassName method to get a collection of elements with the specified class name(s).

   • If there is only one element with the specified CSS class, get the element directly from the document.

     JS

     var headerElement = document.getElementsByClassName("dpHeader")[0];
     headerElement.style.backgroundColor = "Yellow";
     

   • If you have several elements with the same structure, for instance, several docking panels with the same CSS class applied to the header, you can search for an element inside the required panel.

     JS

     var dpElement = dockPanel.GetMainElement();  
     var headerElement = dpElement.getElementsByClassName("dpHeader")[0];  
     headerElement.style.backgroundColor = "Yellow";  
     

Use jQuery to change style settings for all elements that contain the specified CSS class.

JS

$('.dpHeader').css({ 'background-Color': "Yellow" });