Click here to Skip to main content
Click here to Skip to main content
Go to top

Create CSS class programmatically

, 26 Aug 2011
Rate this:
Please Sign up or sign in to vote.
Create CSS class programmatically

Editorial Note

This article appears in the Third Party Products and Tools section. Articles in this section are for the members only and must not be used to promote or advertise products in any way, shape or form. Please report any spam or advertising.

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;
}

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

scott_liu
Software Developer (Senior)
Canada Canada
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 26 Aug 2011
Article Copyright 2011 by scott_liu
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid