এখানে এটি করার "পুরাতন স্কুল" পদ্ধতিটি রয়েছে, যা আশা করা যায় যে সমস্ত ব্রাউজার জুড়ে কাজ করে। তত্ত্বের ক্ষেত্রে, আপনি setAttributeদুর্ভাগ্যবশত আই 6 ব্যবহার করবেন এটি ধারাবাহিকভাবে সমর্থন করে না।
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://website.com/css/stylesheet.css';
link.media = 'all';
head.appendChild(link);
}
এই উদাহরণটি সিএসএস ইতিমধ্যে যুক্ত করা হয়েছে কিনা তা পরীক্ষা করে তাই এটি কেবল একবার যুক্ত করে।
সেই কোডটিকে জাভাস্ক্রিপ্ট ফাইলে রাখুন, শেষ-ব্যবহারকারীকে কেবল জাভাস্ক্রিপ্ট অন্তর্ভুক্ত করুন এবং নিশ্চিত করুন যে সিএসএসের পথটি নিখুঁত তাই এটি আপনার সার্ভার থেকে লোড হয়েছে।
VanillaJS
এখানে headইউআরএল এর ফাইল নাম অংশের উপর ভিত্তি করে উপাদানটিতে সিএসএস লিঙ্ক ইনজেক্ট করার জন্য সরল জাভাস্ক্রিপ্ট ব্যবহার করে এমন একটি উদাহরণ এখানে দেওয়া হয়েছে :
<script type="text/javascript">
var file = location.pathname.split( "/" ).pop();
var link = document.createElement( "link" );
link.href = file.substr( 0, file.lastIndexOf( "." ) ) + ".css";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";
document.getElementsByTagName( "head" )[0].appendChild( link );
</script>
ক্লোজিং headট্যাগের ঠিক আগে কোডটি প্রবেশ করুন এবং পৃষ্ঠাটি রেন্ডার হওয়ার আগে সিএসএস লোড হবে। একটি বাহ্যিক জাভাস্ক্রিপ্ট ( .js) ফাইল ব্যবহারের ফলে স্টাইলবিহীন সামগ্রীর একটি ফ্ল্যাশ উপস্থিত হতে পারে ( FOUC )।