65.9K
CodeProject is changing. Read more.
Home

Create CSS class programmatically

starIconstarIconstarIconstarIconstarIcon

5.00/5 (1 vote)

Aug 25, 2011

CPOL
viewsIcon

19192

Create CSS class programmatically

ExtJS has a utility function to create CSS class programatically, like the following I once used:
Ext.util.CSS.createStyleSheet('.x-tab-tabmenu-right {' +
            'background: transparent url(/images/tab-menu.gif) no-repeat 0 0;' +
            'border-bottom: 1px solid #8db2e3;' +
            'width:18px;' +
            'position:absolute;' +
            'right:0;' +
            'top:0;' +
            'z-index:1000;' +
            'cursor:pointer;' +
            '} .x-tab-tabmenu-over {background-position: -18px 0;}', 'tabMenu'
        );
When I was writing a Sencha Touch Moble web app, I wanted this functionality, but it does not have it. Then I have to use pure JavaScript as follows (I've made it a function):
addClass: function(css) {
    var styleTag = document.getElementsByTagName('style')[0];
    var originalStyles = '';
    if (! styleTag){
        styleTag = document.createElement('style');
        styleTag.type = 'text/css';
        document.getElementsByTagName('head')[0].appendChild(styleTag);
    } else {
        originalStyles = styleTag.innerHTML;
    }
    styleTag.innerHTML = originalStyles + css;
}