How to inspect HTML elements in the browser

Internet explorer

Check whether the Developer Toolbar is installed on your machine. If you are using IE8+, this tool is already integrated in your browser. Otherwise, you need to install it manually. If the Developer Tool is installed, perform the following steps:

1. Execute Developer Toolbar by pressing the F12 key on your keyboard. Alternatively, click the Tools -> F12 Developer tools menu as shown below.

2. The Developer Tools window will be displayed;

3. Click the Select element button;

4. Click an element on the page;

5. A corresponding HTML element will be selected in the HTML window;

6. Now we know that the CSS rule with the “testRule” name is applied to the element;
7. Find this rule in the Style window as shown below:

Firefox

The Firebug add-on is used for this purpose. Check whether this tool is installed on your machine and perform the following steps:

1. Execute Firebug by pressing the F12 key on your keyboard. Alternatively, click the Tools -> Web Developer -> Firebug -> Open Firebug menu as shown below.

2. The Firebug window will be displayed;

3. Click the button that is shown below to inspect a corresponding element;

4. Click the element on the page;

5. A corresponding HTML element will be selected in the HTML window;

6. Determine the rule name as shown above;
7. Find this rule in the Style window as shown below:

Chrome

Use Developer Tools to accomplish this task.
1. Execute Developer Tools by pressing the F12 key on your keyboard. Alternatively, click the Menu -> Tools -> Developer tools menu as shown below.

2. The Developer Tools window will be displayed;

3. Click the button that is shown below to inspect a corresponding element;

4. Click the element on the page;

5. A corresponding HTML element will be selected in the HTML window;

6. Determine the rule name as shown above;
7. Find this rule in the Style window as shown below:

Opera

Use the Opera Dragonfly tool.
1. Execute the Opera Dragonfly tool by pressing the Ctrl+Shift+I key combination on your keyboard. Alternatively, click the Menu -> Page -> Developer Tools -> Opera Dragonfly menu as shown below.

2. The Opera Dragonfly tool window will be displayed;

3. Check whether the following buttons are pressed as shown below:

4. Click the element on the page;

5. A corresponding HTML element will be selected in the HTML window;

6. Determine the rule name as shown above;
7. Find this rule in the Style window as shown below:

Safari

1. Click the Safari settings -> Preferences... menu as shown below.

2. In the Settings window click the Advanced tab and enable the Show Develop menu in menu bar option as shown below.

3. Close the Settings window and click the Menu for current page -> Develop -> Show Web Inspector menu.

The remaining steps are the same as for Google Chrome.

Source: How to inspect CSS rules

AspxComboxbox Client Side Events and Client Side Properties

1. How to get the Text of combobox in clientside javascript

===========================================================

Aspx Page Code

===============

<dx :ASPxComboBox ID="cmbExample1" ClientInstanceName="cmbExample" runat="server">

</dx: ASPxComboBox>

<asp:button Id="btnTest" Text="Show Text" OnClientClick="ShowComboText(); return false;" runat="server" >

Note: here "cmbExample" is the clientinstance name of the combobox control.

Javascript:

===========

function ShowComboText()

{ 

    var comboText= cmbExample.GetText(); 

  alert(comboText); 

}  

2. How to get the value of the combobox in clientside javascript

================================================================

 <asp:button Id="btnTest" Text="Show Value" OnClientClick="ShowComboValue(); return false;" runat="server" >

Note: here "cmbExample" is the clientinstance name of the combobox control.

Javascript:

===========

function ShowComboValue()

{ 

    var comboval= cmbExample.GetValue(); 

   alert(comboval);  

}  

                                    

3. How to find the item from combobox in clientside javascript

================================================================

 <asp:button Id="btnTest" Text="Show Item" OnClientClick="ShowFoundedItemByVal(); return false;" runat="server" >

Note: here "cmbExample" is the clientinstance name of the combobox control.

Javascript:

===========

function ShowFoundedItemByVal()

{  

    var comboitem= cmbExample.FindItemByValue('your value');

  alert(comboitem);  

}  

function ShowFoundedItemByText()

{ 

      var comboitem= cmbExample.FindItemByText('your value'); 

    alert(comboitem);   

}  

                                

4. How to remove from combobox in clientside javascript

================================================================

 <asp:button Id="btnTest" Text="Remove Item" OnClientClick="RemoveItem(); return false;" runat="server" >

Note: here "cmbExample" is the clientinstance name of the combobox control.

Javascript:

===========

function RemoveItem()

{ 

    var comboitem= cmbExample.FindItemByValue('your value'); 

 if (comboitem != undefined && comboitem != null) 

  {

         cmbExample.RemoveItem(comboitem.index);

          

   }

}  

AspxGridView Client Side Events and Client Side Properties

1. How to check the column name exist in the aspxgridview client side
============================================
function GetColumn(s, e) 
{ 
      var MsgIDcolumn = s.GetColumnByField( "MsgID");           
       if (!!MsgIDcolumn) 
      {   
           return MsgIDcolumn;      
      }
}

2. How to get column values from the aspxgridview in client side
==========================================

function ShowValues(s, e) {
    s.GetRowValues(e.visibleIndex, 'ReletedWithChildId;ID',DisplayValues);
}

function DisplayValues(RelatedWithIDData)
{
    alert("ReletedWithChildId:" + RelatedWithIDData[0]);  alert("ID:" + RelatedWithIDData[1]);
}