Customize the crmForm

There are some useful crmForm customization skills which I want to share:

1. Change a filed label style

/* change new_button field label style */
if (crmForm.all.new_button != null)
{
  var field = crmForm.all.new_button_c;
  field.style.fontWeight = 'bold'; // change font to bold
  field.style.fontSize = '12px'; // change font size
  field.style.color = '#ff0000';  //change font color
}

2. Replace a field to a button, and attach the onclick() event

/* replace new_button_d to a button */
if (crmForm.all.new_button != null)
{
  var field = crmForm.all.new_button_d;
  var html = "<table border='0' cellspacing='0' cellpadding='0'><tr><img width='32' height='32' style='cursor:hand' src='/_imgs/ico_32_134.gif' alt='Click button' onclick='Button_OnClick()' /></tr></table>";
  field.innerHTML = html;
}
Button_OnClick = function()
{
  alert("button clicked!"); 
}

3. Replace a field to a lable (use replaceNode())

/* replace new_button_d to a label */
if (crmForm.all.new_button != null)
{
  var html = document.createElement( "<TD id='new_button_d'>");
  html.innerText = "this is a lable";
  crmForm.all.new_button_d.replaceNode(buttonText);
}

4. Append text under a field (you don't need to create an attribute for that)

/* append text under new_button */
if(crmForm.all.new_button != null)
{
  var html= document.createElement( "<LABEL>");
  html.innerText = "this is a text field";
  crmForm.all.new_button.parentNode.appendChild(html);
}