Control/Set/Add a CSS2,3 style in JS
Dear everybody!
How are you?
This is my first post.
Recently, I have analyzed how can set/add/control the css3 in Javascript.
So this now, I have attached a details.
Please see details : http://evening.engellee.com/eveningCSS3WithJS/
evening.docId()//get object
evening.docCss()//set css of object
evening.docAddCss3Vendor()//add css3 vendor prefix like moz, webkit
evening.docGetCss3Vendor()//get css3 vendor prefix like moz, webkit
evening.docAddStyle()//add style in head tag
Here is my code :
//////////////////////////////////////////////////////////////////////////////////////////
<script>
var evening = {
docId: function(id){
return document.getElementById(id);
},
docName: function(name){
return document.getElementsByName(name);
},
docClass: function(cls){
return document.getElementsByClassName(cls);
},
docTag: function(tag){
return document.getElementsByTagName(tag);
},
docCss: function(obj){
return obj.style;
},
docAddCss3Vendor: function(str){
var css3vendors = ['', '-moz-','-webkit-','-o-','-ms-','-khtml-'];
var root = document.documentElement;
function camelCase(str){
return str.replace(/\-([a-z])/gi, function (match, p1){ // p1 references submatch in parentheses
return p1.toUpperCase(); // convert first letter after "-" to uppercase
});
}
for (var i=0; i<css3vendors.length; i++){
var css3propcamel = camelCase( css3vendors[i] + str );
if (css3propcamel.substr(0,2) == 'Ms') // if property starts with 'Ms'
css3propcamel = 'm' + css3propcamel.substr(1); // Convert 'M' to lowercase
if (css3propcamel in root.style)
return css3propcamel;
}
return undefined;
},
docGetCss3Vendor: function(str){
var css3vendors = ['', '-moz-','-webkit-','-o-','-ms-','-khtml-'];
var root = document.documentElement;
function camelCase(str){
return str.replace(/\-([a-z])/gi, function (match, p1){ // p1 references submatch in parentheses
return p1.toUpperCase(); // convert first letter after "-" to uppercase
});
}
for (var i=0; i<css3vendors.length; i++){
var css3propcamel = camelCase( css3vendors[i] + str );
if (css3propcamel.substr(0,2) == 'Ms') // if property starts with 'Ms'
css3propcamel = 'm' + css3propcamel.substr(1); // Convert 'M' to lowercase
if (css3propcamel in root.style)
return css3vendors[i];
}
return undefined;
},
docAddStyle: function(styles){
// Add a stylesheet to the document and populate it with the specified styles.
// The styles argument can be a string or an object. If it is a string, it
// is treated as the text of the stylesheet. If it is an object, then each
// property defines a style rule to be added to the stylesheet. Property
// names are selectors and their values are the corresponding styles
// First, create a new stylesheet
var styleElt, styleSheet;
if (document.createStyleSheet) { // If the IE API is defined, use it
styleSheet = document.createStyleSheet();
}
else {
var head = document.getElementsByTagName("head")[0];
styleElt = document.createElement("style"); // New <style> element
head.appendChild(styleElt); // Insert it into <head>
// Now the new stylesheet should be the last one
styleSheet = document.styleSheets[document.styleSheets.length-1];
}
// Now insert the styles into it
if (typeof styles === "string") {
// The argument is stylesheet text
if (styleElt) styleElt.innerHTML = styles;
else styleSheet.cssText = styles; // The IE API
}
else {
// The argument is an object of individual rules to insert
var i = 0;
for(selector in styles) {
if (styleSheet.insertRule) {
var rule = selector + " {" + styles[selector] + "}";
styleSheet.insertRule(rule, i++);
}
else {
styleSheet.addRule(selector, styles[selector], i++);//IE API
}
}
}
},
docLog: function(str){// Output a str within console log.
console.log(str);
}
};
</script>
//////////////////////////////////////////////////////////////////////////////////////////
Please contact me if you have any questions.
Kind regards
Niao Jina
CSS Codes
Reply With Quote
Bookmarks