Posted By

mlange on 10/03/06

Tagged

Versions (?)

Last Edited at 10/03/06 05:32am

Statistics

Viewed 646 times

Favorited by 3 user(s)

Related snippets

DOM manipulation

/ Published in: JavaScript

Highlighted TextExpand

// ------------------------------------------------
//   document.getElementById()

/* 
DOM browsers use the document.getElementById method to reference the element. You can use a simple if statement to check for the existence of this method.
*/

if( document.getElementById ){
	var myReference = document.getElementById('divID');
}

// ------------------------------------------------
//   Changing the position

var noPx = document.childNodes ? 'px' : 0;
if( myReference.style ) { myReference = myReference.style; }
myReference.left = ( parseInt(myReference.left) + 10 ) + noPx;
myReference.top = ( parseInt(myReference.top) + 20 ) + noPx;

// ------------------------------------------------
//   Changing the background color

if( myReference.style ) { myReference = myReference.style; }
if( myReference.background ) {
  //supported by most browsers
  //like Gecko browsers and the IE series
  myReference.background = '#00ff00';
} else if( myReference.backgroundColor ) {
  //supported by most browsers
  myReference.backgroundColor = '#00ff00';
} else if( myReference.bgColor ) {
  //used by layers browsers
  myReference.bgColor = '#00ff00';
} else {
  //FAILURE, there is no way to change the background colour
}

// ------------------------------------------------
//   Changing the z-index

/*
The z-index of positioned elements defines what order they should be stacked above each other. The z-index should be a positive integer. The higher the z-index, the more positioned elements it will be stacked on top of. Two elements must not be given the same z-index. To read the z-index of a positioned element, it must be already defined using the inline style syntax.
*/

if( myReference.style ) { myReference = myReference.style; }
myReference.zIndex = 100;

// ------------------------------------------------
//   Changing the clipping

/*
Clipping can only be used on absolutely positioned elements.

This technique is usually used for message scrollers. In browsers that do not support clipping, it is possible to provide them with an iframe so that the contents of that can be scrolled. Please see my scroller example for a more detailed explaination of what clipping is and how it works.
*/

if( myReference.clip ) {
  myReference.clip.left = 0;
  myReference.clip.top = 0;
  myReference.clip.right = 10;
  myReference.clip.bottom = 10;
} else if( myReference.style ) {
  //top right bottom left
  myReference.style.clip = 'rect(0px, 10px, 10px, 0px)';
} else {
  //FAILURE, nothing works
}

// ------------------------------------------------
//   Changing the size

if( myReference.style ) { myReference = myReference.style; }
if( myReference.resizeTo ) {
  myReference.resizeTo( newWidth, newHeight );
}
var noPx = document.childNodes ? 'px' : 0;
myReference.width = newWidth + noPx;
myReference.pixelWidth = newWidth;
myReference.height = newHeight + noPx;
myReference.pixelHeight = newHeight;

// ------------------------------------------------
//   Rewriting the contents

if( typeof( myReference.innerHTML ) != 'undefined' ) {
  //used by all current browsers
  myReference.innerHTML = 'some <b>new</b> content';
}

// ------------------------------------------------
//   Creating new positioned elements

if( document.layers && window.Layer && document.classes ) {
  //create a layer 350px wide
  document.layers['newName'] = new Layer( 350 );
  //write its content
  document.layers['newName'].document.open();
  document.layers['newName'].document.write('new content');
  document.layers['newName'].document.close();
  //style it
  document.layers['newName'].left = 0;
  document.layers['newName'].top = 0;
  document.layers['newName'].visibility = 'show';
} else if( document.body ) {
  var theString = '<div style="position:absolute;left:0px;top:0px;' +
    'width:350px;">new content</div>';
  if( document.body.insertAdjacentHTML ) {
    document.body.insertAdjacentHTML( 'beforeEnd', theString );
  } else if( typeof( document.body.innerHTML ) != 'undefined' ) {
    document.body.innerHTML += theString;
  } else {
    //FAILURE, nothing works
  }
} else {
  //FAILURE, nothing works
}

// ------------------------------------------------
//   Changing the display style of any element

URL: http://www.howtocreate.co.uk/tutorials/javascript/dombasics

Report this snippet Tweet