Style ändern#
function findStyle(selectorText) {
for (var i = 0; i < document.styleSheets.length; ++i) {
var styleSheet = document.styleSheets[i];
var css = styleSheet.cssRules || styleSheet.rules;
for (var j = 0; j < css.length; ++j) {
var rule = css[j];
if (rule.selectorText == selectorText)
return rule.style;
}
}
}
Die Funktion kann dann wie folgt verwendet werden:
findStyle('.test').width = '100px';
Events#
Events aus Mozilla und IE bekommt man mit "event || window.event":<input onkeypress="alert((event || window.event).keyCode);">
Focus und Keypress#
Normale Elemente bekommen Key-Events nur mit, wenn sie einen Tabindex und den Focus haben:<div tabindex="0" onkeypress="alert((event || window.event).keyCode);" onmouseover="focus();" onmouseout="blur();"> TEST </div>
Dynamische Header#
Folgender Code fügt neue Header ein:
function addHeader(text) {
var head = document.getElementsByTagName("head")[0];
var div = document.createElement('div');
div.innerHTML = text;
for (var i = 0; i < div.childNodes.length; ++i) {
var element = document.createElement(div.childNodes[i].nodeName);
element.innerHTML = div.childNodes[i].innerHTML;
for (var j = 0; j < div.childNodes[i].attributes.length; ++j) {
element.setAttribute(
div.childNodes[i].attributes[j].name, div.childNodes[i].attributes[j].value);
}
head.appendChild(element);
}
}
Property Interceptor#
Mit Object.defineProperty kann man einen Interceptor für Getter und Setter einfügen:
var scrollTop = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(HTMLElement.prototype), "scrollTop");
Object.defineProperty(HTMLElement.prototype, "scrollTop", {
get: function() {
return scrollTop.get.apply(this, arguments);
},
set: function() {
return scrollTop.set.apply(this, arguments);
}
});
