Web Developer - Cagayan de Oro low cost Web Development Philippines | Filipino Web Developer | Cagayan de Oro Programmer | Web 2.0 Developer

Tutorials >> View >> 2

Yahoo chat:

Using JavaScript to add or import CSS stylesheet and JavaScript

This Javascript will help your xHTML codes to be more W3C xHTML standard compliant web applications using XHTML 1.0 Transitional or XHTML 1.0 Stict. This script purpose is to import CSS stylesheets or Javascript without violating the W3C standard. For all we know, calling or importing CSS like this <link type="text/css" href="css/stylesheet.css" /> inside the BODY tag because that will violate the W3C standard because we can only import CSS by putting the import tag inside the HEAD tag. But we really want it that we can import CSS at any place of the BODY tag. So I have this Javascript to import CSS stylesheets and also javascript. The concept is the javascript code will virtually create a LINK or SCRIPT tag inside the HEAD tag, so there is no violation of W3C standard. Enjoy using the script everyone, dont forget to leave a comment.

Learn the codes below:

/*
Copy the code/script and paste it anywhere in the BODY
Tag and replace the sample .css file url with your url.
*/
<script type="text/javascript">
//<![CDATA[
if( document.createStyleSheet ) {
   document.createStyleSheet('http://localhost/css/styles.css');
} else {
   var styles = "@import url('http://localhost/css/styles.css');";
   var css=document.createElement("link");
   css.rel="stylesheet";
   css.href="data:text/css,"+escape(styles);
   document.getElementsByTagName("head")[0].appendChild(css);
}
//]]>
</script>

/*
Copy the code/script and paste it anywhere in the BODY
Tag and replace the sample .js file url with your url.
*/
<script type="text/javascript">
//<![CDATA[
var script=document.createElement("script");
script.type="text/javascript";
script.src="http://localhost/js/sample-script.js";
document.getElementsByTagName("head")[0].appendChild(script);
//]]>
</script>

Click image to download the Zip file:

# of Comments (0)

Add your comment here...

Please feel free to make a comment and suggestion on this tutorial. Your comment and suggestion will help improve the tutorial for the benefit of you and others. Thank you...

Name : *

Email Add : *

URL (include http://):

Messages : *

Security Code : *

(*) Must not leave blank.