Sometimes, when working with dynamically created objects on the client, it is needed to style these elements in a specific way. Due to the nature of these objects (for example – unique IDs) , they cannot be styled in the classic way, though. The document.createElement
method of JavaScript can be used to create <style>...</style>
tag and append it in the <head>...</head>
section of the page, however populating it with CSS rules / classes cannot be done with innerHTML
under Internet Explorer, which implements a different method for this particular case – by applying the cssText
method to the styleSheet
object.
Below is an example of how to implement this approach.
function createStyleTag() { var head = document.getElementsByTagName('head')[0]; var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1; var isSafari = navigator.userAgent.toLowerCase().indexOf('safari') > -1; var cssstring = [ '#MyDiv1 {' + 'color: red;' + '}' ]; if(!isChrome && !isSafari) { var styletag = $create('style'); styletag.setAttribute('type', 'text/css'); head.appendChild(styletag); if(!window.ActiveXObject) { styletag.innerHTML = cssstring; // if not Internet Explorer } else { styletag.styleSheet.cssText = cssstring; // if Internet Explorer } } }
The full example is available for download at this link.
© 2006 - 2023 Martin Ivanov