Intro to the CBE Appearance Methods

Notes

See the object reference for complete details of each function, and for an explanation of the parameter syntax used here.

Text & Background Colors

color([s])

Sets the text color. Returns the current text color.

Example 1 Sets random colors for the text of E1, E2 and E3, and displays the color values on the status bar.

function randomTextColors() {
  var s, c;
  c = cbeHexString(Math.random()*0xffffff, 6, '#');
  s = 'E1: ' + c;
  e1.color(c);
  c = cbeHexString(Math.random()*0xffffff, 6, '#');
  s += ', E2: ' + c;
  e2.color(c);
  c = cbeHexString(Math.random()*0xffffff, 6, '#');
  s += ', E3: ' + c;
  e3.color(c);
  window.status = s;
}

background(sColor [,sImage])

Sets the background color, and optionally, the background image. Returns the current background color.

Example 2 Sets random colors for the backgrounds of E1, E2 and E3, and displays the color values on the status bar.

function randomBgColors() {
  var s, c;
  c = cbeHexString(Math.random()*0xffffff, 6, '#');
  s = 'E1: ' + c;
  e1.background(c);
  c = cbeHexString(Math.random()*0xffffff, 6, '#');
  s += ', E2: ' + c;
  e2.background(c);
  c = cbeHexString(Math.random()*0xffffff, 6, '#');
  s += ', E3: ' + c;
  e3.background(c);
  window.status = s;
}

Example 3 Sets the background color of E1 to the same color as E3's background.

function example3() {
  var e1 = document.getElementById('E1').cbe;
  var e3 = document.getElementById('E3').cbe;
  e1.background(e3.background());
}

Top

Visibility & Z-Index

visibility([b] | [s])

Sets the visibility. The argument can be boolean or string. Returns boolean.

show()

Calls visibility(1) to show the element.

hide()

Calls visibility(0) to hide the element.

e1.hide()  | e1.show()  | alert(e1.visibility())

zIndex([uZ])

Sets the zIndex (stacking order). Returns the current z-index.

Example 4 Swaps the z-index of E1 and E2.

function example4() {
  var e1 = document.getElementById('E1').cbe;
  var e2 = document.getElementById('E2').cbe;
  var z = e1.zIndex();
  e1.zIndex(e2.zIndex());
  e2.zIndex(z);
}

Top

Inner HTML

innerHtml(sHtml)

innerHtml replaces the HTML between the element's opening and closing tags. Returns string. Not supported by Opera6.

Example 5 Passes e1.innerHtml() a long string.

function example5() {
  var e1 = document.getElementById('E1').cbe;
  var s = "a long string";
  e1.innerHtml(s);  
}

It's interesting to notice what happens to the size of the element after calling innerHtml(). Use the following link to view e1's size information before and after example 5.

e1 size info