> You don't need inline style to accomplish this. You can assign the
> changed CSS to the style property of the given DOM object without ever
> updating the HTML style attribute.
> (...)
> tabElement.addEventListener('mousemove', function(event) {
> myTabElement.style.left = positionX;
> myTabElement.style.top = positionY;
> });
Yeah, this is a nice way for manipulating elements that are in XHTML
namespace. But for elements from custom XML namespaces "style"
attribute is hard-coded to null.
I have managed to implement rough support for inline XML styles that
works on Firefox:
http://pics.kiwi-themes.com/tests/dynamic%20CSS/test.xhtml
// Create new empty embedded stylesheets
var styleElement = document.createElement("style");
document.getElementsByTagName("head")[0].appendChild(styleElement);
// When value of "style" attribute on XML element is changed, convert it
// to CSS rule and insert into embedded stylesheet
document.querySelector('tabs').addEventListener('DOMAttrModified',
function(event) {
if (event.attrName === 'style') {
var rule = '[style="' + event.newValue + '"]' + '{' +
event.newValue + '}';
styleElement.sheet.insertRule(rule , styleElement.sheet.cssRules.length);
}
}, false);
I know this is an ugly hack and not the real solution that you were
talking about, but it works. Unfortunately there is one huge show
stopper: Webkit-based browsers don't support DOMAttrModified which
means there is no efficient way for watching XML attributes for
changes on Chrome or Safari.
--
To view archived discussions from the original JSMentors Mailman list:
http://www.mail-archive.com/[email protected]/
To search via a non-Google archive, visit here:
http://www.mail-archive.com/[email protected]/
To unsubscribe from this group, send email to
[email protected]
