javascript - জাভাস্ক্রিপ্ট শেখার বই




কিভাবে জাভাস্ক্রিপ্ট দিয়ে একটি<শৈলী> ট্যাগ তৈরি করবেন? (9)

ইতিমধ্যে jQuery ব্যবহার করে যারা, আপনি এই এক-মাছ ধরার নৌকা ব্যবহার করতে পারেন:

$('<style>'+ styles +'</style>').appendTo(document.head);

আমি একটি <style> ট্যাগটি জাভাস্ক্রিপ্টের সাথে একটি HTML পৃষ্ঠাতে সন্নিবেশ করার একটি উপায় খুঁজছি।

আমি এতদূর খুঁজে পেয়েছি সেরা উপায়:

var divNode = document.createElement("div");
divNode.innerHTML = "<br><style>h1 { background: red; }</style>";
document.body.appendChild(divNode);

এটি ফায়ারফক্স, অপেরা এবং ইন্টারনেট এক্সপ্লোরারে কাজ করে তবে গুগল ক্রোমে নয়। এছাড়াও এটি IE এর সামনে <br> সাথে কিছুটা কুৎসিত।

যে কেউ একটি <style> ট্যাগ তৈরি করার উপায় জানেন

  1. নিকার

  2. ক্রোম দিয়ে কাজ করে?

অথবা হতে পারে

  1. এটি একটি অ মানসম্মত জিনিস যা আমি এড়িয়ে চলা উচিত

  2. তিনটি কাজ ব্রাউজার দুর্দান্ত এবং কেমনে ক্রোম ব্যবহার করে?


আমি অনুমান করছি যে আপনি একটি style ট্যাগটি একটি link ট্যাগ (একটি বহিরাগত CSS উল্লেখ করে) এর সাথে সন্নিবেশ করতে চাইছেন, তাই নিম্নোক্ত উদাহরণটি এই রকম করে:

<html>
 <head>
  <title>Example Page</title>
 </head>
 <body>
  <span>
   This is styled dynamically via JavaScript.
  </span>
 </body>
 <script type="text/javascript">
   var styleNode = document.createElement('style');
   styleNode.type = "text/css";
   // browser detection (based on prototype.js)
   if(!!(window.attachEvent && !window.opera)) {
        styleNode.styleSheet.cssText = 'span { color: rgb(255, 0, 0); }';
   } else {
        var styleText = document.createTextNode('span { color: rgb(255, 0, 0); } ');
        styleNode.appendChild(styleText);
   }
   document.getElementsByTagName('head')[0].appendChild(styleNode);
 </script>
</html>

এছাড়াও, আমি আপনার প্রশ্নের মধ্যে লক্ষ্য করেছি যে আপনি অভ্যন্তরীণ innerHTML ব্যবহার innerHTML । এটি আসলে একটি পৃষ্ঠায় ডেটা সন্নিবেশ করার একটি অ-মানক পদ্ধতি। সর্বোত্তম অনুশীলনটি একটি পাঠ্য নোড তৈরি করা এবং এটি অন্য উপাদান নোডের সাথে যুক্ত করা।

আপনার চূড়ান্ত প্রশ্ন সম্পর্কে, আপনি কিছু লোককে বলবেন যে আপনার কাজটি সমস্ত ব্রাউজার জুড়ে কাজ করা উচিত। এটা সব আপনার শ্রোতার উপর নির্ভর করে। যদি আপনার দর্শকদের কেউ Chrome ব্যবহার করে না, তবে এটি ঘাম করবেন না; তবে, যদি আপনি সম্ভাব্য সর্বাধিক শ্রোতাদের কাছে পৌঁছাতে চান তবে সমস্ত প্রধান A-grade ব্রাউজারগুলিকে সমর্থন করা সেরা


এখানে একটি স্ক্রিপ্ট যা createStyleSheet() শৈলী createStyleSheet() এবং addRule() পদ্ধতিগুলিকে ব্রাউজারগুলিতে যুক্ত করে যা তাদের নেই:

if(typeof document.createStyleSheet === 'undefined') {
    document.createStyleSheet = (function() {
        function createStyleSheet(href) {
            if(typeof href !== 'undefined') {
                var element = document.createElement('link');
                element.type = 'text/css';
                element.rel = 'stylesheet';
                element.href = href;
            }
            else {
                var element = document.createElement('style');
                element.type = 'text/css';
            }

            document.getElementsByTagName('head')[0].appendChild(element);
            var sheet = document.styleSheets[document.styleSheets.length - 1];

            if(typeof sheet.addRule === 'undefined')
                sheet.addRule = addRule;

            if(typeof sheet.removeRule === 'undefined')
                sheet.removeRule = sheet.deleteRule;

            return sheet;
        }

        function addRule(selectorText, cssText, index) {
            if(typeof index === 'undefined')
                index = this.cssRules.length;

            this.insertRule(selectorText + ' {' + cssText + '}', index);
        }

        return createStyleSheet;
    })();
}

আপনি মাধ্যমে বহিরাগত ফাইল যোগ করতে পারেন

document.createStyleSheet('foo.css');

এবং গতিশীলভাবে মাধ্যমে নিয়ম তৈরি

var sheet = document.createStyleSheet();
sheet.addRule('h1', 'background: red;');

কাজ করে এবং সমস্ত ব্রাউজারের সাথে সঙ্গতিপূর্ণ একটি উদাহরণ:

var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "style.css";
document.getElementsByTagName("head")[0].appendChild(ss);

তুমি লিখেছিলে:

var divNode = document.createElement("div");
divNode.innerHTML = "<br><style>h1 { background: red; }</style>";
document.body.appendChild(divNode);

কেন এই না?

var styleNode = document.createElement("style");
document.head.appendChild(styleNode);

অতএব আপনি এইচটিএমএল কোড সহজে সিএসএস নিয়ম যোগ করতে পারেন:

styleNode.innerHTML = "h1 { background: red; }\n";
styleNode.innerHTML += "h2 { background: green; }\n";

... অথবা সরাসরি ডামে যাও:

styleNode.sheet.insertRule("h1 { background: red; }");
styleNode.sheet.insertRule("h2 { background: green; }");

আমি এই পুরানো ব্রাউজার ছাড়া সর্বত্র কাজ করতে আশা করি।

অবশ্যই 2019 সালে ক্রোমে কাজ করে


প্রায়শই বিদ্যমান নিয়মগুলি ওভাররাইড করার প্রয়োজন আছে, তাই HEAD এ নতুন শৈলী যোগ করা প্রত্যেক ক্ষেত্রে কাজ করে না।

আমি এই সহজ ফাংশনটি দিয়ে এসেছি যা "শরীরের সাথে যোগ করুন" পদ্ধতিগুলি বৈধ নয় এবং এটি ব্যবহার এবং ডিবাগ করার জন্য আরও বেশি সুবিধাজনক (IE8 +)।

window.injectCSS = (function(doc){
    // wrapper for all injected styles and temp el to create them
    var wrap = doc.createElement('div');
    var temp = doc.createElement('div');
    // rules like "a {color: red}" etc.
    return function (cssRules) {
        // append wrapper to the body on the first call
        if (!wrap.id) {
            wrap.id = 'injected-css';
            wrap.style.display = 'none';
            doc.body.appendChild(wrap);
        }
        // <br> for IE: http://goo.gl/vLY4x7
        temp.innerHTML = '<br><style>'+ cssRules +'</style>';
        wrap.appendChild( temp.children[1] );
    };
})(document);

ডেমো: codepen , jsfiddle


যদি আপনি যে সমস্যার সম্মুখীন হন সেটি একটি পৃষ্ঠায় সিএসএসের স্ট্রিংকে ইনজেকশন করা হয় তবে এটি <link> <style> উপাদানটির চেয়ে উপাদানটি করা সহজ।

নিম্নলিখিত p { color: green; } যোগ p { color: green; } p { color: green; } পৃষ্ঠা থেকে নিয়ম।

<link rel="stylesheet" type="text/css" href="data:text/css;charset=UTF-8,p%20%7B%20color%3A%20green%3B%20%7D" />

আপনি জাভাস্ক্রিপ্টে এটি কেবল CSS এর আপনার স্ট্রিং এনকোডিং করে এবং এটি HREF বৈশিষ্ট্য যোগ করে তৈরি করতে পারেন। <style> উপাদানগুলি বা সরাসরি স্টাইলশীটগুলির অ্যাক্সেসের সমস্ত কুইকগুলির চেয়ে অনেক সহজ।

let linkElement: HTMLLinkElement = this.document.createElement('link');
linkElement.setAttribute('rel', 'stylesheet');
linkElement.setAttribute('type', 'text/css');
linkElement.setAttribute('href', 'data:text/css;charset=UTF-8,' + encodeURIComponent(myStringOfstyles));

এই IE 5.5 উপরে কাজ করবে


সব ভাল, কিন্তু styleNode.cssText জন্য javascipt দ্বারা তৈরি নোডের সাথে IE6 এ কাজ করার জন্য, আপনি cssText সেট করার আগে আপনাকে নডটি যোগ করতে হবে;

আরও তথ্য @ http://msdn.microsoft.com/en-us/library/ms533698%28VS.85%29.aspx


var list = document.querySelector("head");
list.innerHTML += '<style>
                      h3.header-6.basket-item--header 
                      span.cusplus {
                         color:#c00; 
                      }.
                      cusname{
                         color:grey;font-size:14px;
                      }
                  </style>';

200% কাজ কোড, উপরে উদাহরণ






css