Javascript Tricks

Using Javascript Libraries

Most web pages use Javascript of some kind these days, and the Javascript libraries have become increasingly complicated and provide quite many very useful functions. One very useful way to provide javascript libraries without having to expend extra bandwidth, is by using the Google hosted libraries. You can find out more information about using the Google hosted libraries here: [1]

Getting the CSS Computed Style of an Object

Here are some functions that will get the CSS value of an element regardless of whether it is set in CSS or in Javascript.

function getComputedStyleForElement (element, cssPropertyName) {
   if (element) {
     if (window.getComputedStyle) {
       return window.getComputedStyle(element,'').getPropertyValue(cssPropertyName.replace(/([A-Z])/g, "-$1").toLowerCase());
     }
     else if (element.currentStyle) {
       return element.currentStyle[cssPropertyName];
     }
     else {
       return null;
     }
   }
   else {
     return null;
   }
}

function getComputedStyleForId (elementId, cssPropertyName) {
   if (document.getElementById) {return getComputedStyleForElement(document.getElementById(elementId), cssPropertyName);
   }
   else {
     return null;
   }
}

How to send a mouse click event to an object programmatically

function sendClick(obj) {
	var e = document.createEvent("MouseEvents");
	e.initMouseEvent("click", false, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	obj.dispatchEvent(e);
	return true;
}

Using XPath to get DOM Objects that Meet Certain Criteria

The two functions below complement each other. The snapshotToArray function takes a xpath snapshot and turns it into an array. The $x function returns an array of objects that meet the criteria of the XPath query with a set parent node.

var snapshotToArray = function(snapshot){
	var ar = new Array();
	for (var i = 0; i < snapshot.snapshotLength; i++) {
		ar.push(snapshot.snapshotItem(i));
	}
	return ar;
}
var $x = function(xpath, node) {
	if (!node) node = document;
	var result = document.evaluate(xpath, node, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
	return snapshotToArray(result);
}

Here is an example of using the $x function to grab all the tr elements in tables that have the "advert" class applied to them:

$x('//table[@class="advert"]/tbody/tr',document);

How to Manipulate an Externally Loaded Style Sheet using Javascript

The following example shows how to delete CSS rules from an external CSS file if the href to the file matches the letters "ad", and if the rules in the CSS file contain the "table" selector. This can obviously be leveraged in userscripts through the use of Greasemonkey [2] to remove and otherwise alter externally loaded CSS.

for (var i = 0; i < document.styleSheets.length; i++) {
	if (document.styleSheets[i].href.match('ad')) {
		for (var r = 0; r < document.styleSheets[i].cssRules.length; r++ ) {
			if (document.styleSheets[i].cssRules[r].selectorText.match("table")) {
				document.styleSheets[i].deleteRule(document.styleSheets[i].cssRules[r]);
			}
		}
	}
}