আপনি জাভাস্ক্রিপ্ট দিয়ে সিএসএস কীভাবে যুক্ত করবেন?

Question

strong { color: red }জাভাস্ক্রিপ্ট ব্যবহার করে আপনি কীভাবে সিএসএস বিধি যুক্ত করবেন (উদাঃ )?

Comments

একই প্রশ্ন (উত্তর crossbrowser jQuery হয়) stackoverflow.com/a/266110/341744

— ninMonkey

@ মোমকি: এটি একটি দারুণ সমাধান, এবং আসলে এখানে যা বলা হয়েছিল তা করে না। উদাহরণস্বরূপ: <strong>নথিতে কোনও নতুন উপাদান যুক্ত হলে কী হয় ।

— নিকফ

Answer 1

আপনি এটি ডিওএম স্তর 2 সিএসএস ইন্টারফেস ( MDN ) ব্যবহার করে করতে পারেন :

var sheet = window.document.styleSheets[0];
sheet.insertRule('strong { color: red; }', sheet.cssRules.length);

... সব মিলিয়ে (প্রাকৃতিকভাবে) IE8 এবং এর আগে, যা তার নিজস্ব প্রান্তিক-পৃথক শব্দ ব্যবহার করে:

sheet.addRule('strong', 'color: red;', -1);

এটি তৈরির উপাদান-সেট-অভ্যন্তরীণ এইচটিএমএল পদ্ধতির তুলনায় এর মধ্যে একটি তাত্ত্বিক সুবিধা রয়েছে, এতে আপনাকে অভ্যন্তরীণ এইচটিএমএলে বিশেষ এইচটিএমএল অক্ষর স্থাপনের বিষয়ে চিন্তা করতে হবে না, তবে অনুশীলন শৈলীর উপাদানগুলি উত্তরাধিকারের এইচটিএমএল-এ সিডিএটিএ এবং '<' এবং '&' স্টাইলশিটগুলিতে যাইহোক খুব কমই ব্যবহৃত হয়।

আপনি এটির মতো যুক্ত করা শুরু করার আগে আপনার কাছে স্টাইলশীট দরকার। এটি যে কোনও বিদ্যমান সক্রিয় স্টাইলশিট হতে পারে: বহিরাগত, এম্বেড করা বা খালি এটি কোনও বিষয় নয়। যদি এটি না থাকে তবে এই মুহূর্তে এটি তৈরি করার একমাত্র মানসম্পন্ন উপায় হ'ল ক্রিয়েট এলিমেন্ট।

Comments

"রঙ" .. ওহ, ওফ! ধন্যবাদ যে এটি একটি উদাহরণ ছিল। আমি সন্দেহ করেছি এর জন্য কোনও ডিওএম পদ্ধতি থাকতে পারে, ধন্যবাদ! +1

— নিকফ

পত্রকটি এসেছে sheet = window.document.styleSheets[0] (আপনার এখানে কমপক্ষে একটি <শৈল প্রকার = "পাঠ্য / সিএসএস"> </ স্টাইল> থাকতে হবে) থেকে আসে।

— এজেপি

ধন্যবাদ, গুগলের প্রথম যে উদাহরণগুলি দেখায় সেগুলি এত বিশাল when

— ElDoRado1239

আমি জানি এটি কিছুক্ষণ হয়ে গেছে তবে আমি যখন প্রথম পরীক্ষা করেছি তখন পেয়েছিSecurityError: The operation is insecure.

— ব্যবহারকারীর 10089632

@ ব্যবহারকারী 10089632 আপনি যে স্টাইলশিটটি অ্যাক্সেস করছেন সেটিকে কাজ করার জন্য প্যারেন্ট ডকুমেন্ট হিসাবে একই হোস্ট থেকে পরিবেশন করা দরকার।

— বোবিনস

Answer 2

সহজ-প্রত্যক্ষ পদ্ধতি হ'ল styleনথিতে একটি নতুন নোড তৈরি করা এবং যুক্ত করা ।

// Your CSS as text
var styles = `
    .qwebirc-qui .ircwindow div { 
        font-family: Georgia,Cambria,"Times New Roman",Times,serif;
        margin: 26px auto 0 auto;
        max-width: 650px;
    }
    .qwebirc-qui .lines {
        font-size: 18px;
        line-height: 1.58;
        letter-spacing: -.004em;
    }

    .qwebirc-qui .nicklist a {
        margin: 6px;
    }
`

var styleSheet = document.createElement("style")
styleSheet.type = "text/css"
styleSheet.innerText = styles
document.head.appendChild(styleSheet)

Comments

এটি শরীরের চেয়ে নথির মাথায় সংযুক্ত করা উচিত নয়?

— ববিনস

@ ববিন্স - এইচটিএমএল স্প্যাস অনুসারে একেবারে, তবে সমস্ত ব্রাউজারগুলি এটিকে যে কোনও জায়গায় চিনতে পারে। InsertRule / addRule এর ক্রস ব্রাউজার সমস্যাগুলি এড়াতে document.bodyএবং টাইপ করাও কম এবং এক্সিকিউট করার জন্য দ্রুত document.getElementsByTagName("head")[0]।

— বেন ফাঁকা 17

সমাধান একটি দীর্ঘ "duhhhh" দ্বারা অনুসরণ করা উচিত। বিশ্বাস করতে পারি না আমি এটা ভেবে দেখিনি।

— জর্জ মাউয়ার

সমস্ত সাম্প্রতিক ব্রাউজারগুলিতে আপনি কেবল ব্যবহার করতে পারেন document.head.appendChild।

— গজুস

এই সমাধান আরও ভাল! আপনার একাধিক স্টাইলশিট রয়েছে তা কল্পনা করুন: @ বিবিস সলিউশনের সাহায্যে আপনার সদ্য যুক্ত হওয়া সিএসএস দ্বিতীয় / তৃতীয় / ইত্যাদি দ্বারা ওভাররাইট করা যেতে পারে। পৃষ্ঠায় স্টাইলশিট document.body.appendChild(css);আপনাকে ব্যবহার করে নিশ্চিত হয়ে নিন যে নতুন সিএসএস সর্বদা সর্বশেষ নিয়ম।

— এভিএল

Answer 3

বেন ব্ল্যাঙ্কের সমাধান আমার জন্য আইই 8 তে কাজ করবে না।

তবে এটি আই 8 তে কাজ করেছিল

function addCss(cssCode) {
var styleElement = document.createElement("style");
  styleElement.type = "text/css";
  if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText = cssCode;
  } else {
    styleElement.appendChild(document.createTextNode(cssCode));
  }
  document.getElementsByTagName("head")[0].appendChild(styleElement);
}

Comments

ভাল পুরানো IE সর্বদা জীবনকে সহজ করে তোলে

— অ্যালেক্স ডব্লু

তোমার উপাদান যোগ করা উচিত head আগে সেটিং .cssText, বা IE6-8 হবে বিপর্যস্ত যদি cssCodeমতো রয়েছে @ -directive, @importবা @font-face, এর আপডেট দেখতে phpied.com/dynamic-script-and-style-elements-in-ie এবং Stackoverflow .কম / এ / 7952904

— হান সিওল-ওহ

Answer 4

এখানে একটি নতুন পাঠ্য নোড তৈরির পরিবর্তে আপনিও ব্যবহার করতে পারবেন তা বিবেচনায় নিয়ে ক্রিস হেরিংয়ের সমাধানের সামান্য আপডেট হওয়া সংস্করণ এখানে রয়েছে innerHTML:

function insertCss( code ) {
    var style = document.createElement('style');
    style.type = 'text/css';

    if (style.styleSheet) {
        // IE
        style.styleSheet.cssText = code;
    } else {
        // Other browsers
        style.innerHTML = code;
    }

    document.getElementsByTagName("head")[0].appendChild( style );
}

Comments

তোমার উপাদান যোগ করা উচিত head আগে সেটিং .cssText, বা IE6-8 হবে বিপর্যস্ত যদি codeমতো রয়েছে @ -directive, @importবা @font-face, এর আপডেট দেখতে phpied.com/dynamic-script-and-style-elements-in-ie এবং Stackoverflow .কম / এ / 7952904

— হান সিওল-ওহ

Answer 5

সংক্ষিপ্ত ওয়ান লাইনার

// One liner function:
const addCSS = s =>(d=>{d.head.appendChild(d.createElement("style")).innerHTML=s})(document);

// Usage: 
addCSS("body{ background:red; }")

Answer 6

আপনি উপাদান ভিত্তিতে কোনও উপাদানগুলিতে ক্লাস বা শৈলীর বৈশিষ্ট্য যুক্ত করতে পারেন।

উদাহরণ স্বরূপ:

<a name="myelement" onclick="this.style.color='#FF0';">text</a>

আপনি যেখানে এটি. স্টাইল.ব্যাকগ্রাউন্ড, এটি.স্টাইল.ফন্ট-আকার ইত্যাদি করতে পারেন আপনি এই একই পদ্ধতি আলা ব্যবহার করে একটি স্টাইল প্রয়োগ করতে পারেন

this.className='classname';

আপনি যদি কোনও জাভাস্ক্রিপ্ট ফাংশনে এটি করতে চান তবে আপনি 'এটি' না দিয়ে getElementByID ব্যবহার করতে পারেন।

Comments

ইভেন্ট হ্যান্ডলারগুলি ব্যবহার করে ইনলাইন জাভাস্ক্রিপ্ট খুব খারাপ ধারণা। আপনার জাভাস্ক্রিপ্ট-এ সাধারণত বাহ্যিক ফাইলে আপনার কার্যকারিতা এবং বাধ্যতামূলক ইভেন্ট হ্যান্ডলারদের থেকে আপনার সামগ্রী আলাদা করা উচিত।

— কর্নেল স্পঞ্জস

Answer 7

<style>এইচটিএমএল শিরোনামের যোগ করার এই সহজ উদাহরণ

var sheet = document.createElement('style');
sheet.innerHTML = "table th{padding-bottom: 0 !important;padding-top: 0 !important;}\n"
+ "table ul {    margin-top: 0 !important;    margin-bottom: 0 !important;}\n"
+ "table td{padding-bottom: 0 !important;padding-top: 0 !important;}\n"
+ ".messages.error{display:none !important;}\n"
+ ".messages.status{display:none !important;} ";

document.body.appendChild(sheet); // append in body
document.head.appendChild(sheet); // append in head

উত্স গতিশীল শৈলী - জাভাস্ক্রিপ্ট সহ সিএসএস ম্যানিপুলেট

Answer 8

YUI সম্প্রতি সম্প্রতি এর জন্য একটি ইউটিলিটি যুক্ত করেছে । স্টাইলশীট.জেএস এখানে দেখুন ।

Comments

আমি বর্তমানে আমার কাজের জন্য ওয়াইউআই ব্যবহার করছি এবং বিদ্যমান সিএসএস বিধিগুলির বহিরাগত স্টাইল শিটগুলি কীভাবে সম্পাদনা করব তা বোঝার চেষ্টা করছিলাম। এই ইউটিলিটি সম্পর্কে জানতেন না, এটি নিখুঁত বলে মনে হচ্ছে! ধন্যবাদ রাসেল

— জয়মে

Answer 9

সর্বশেষ শৈলীর শীট তালিকার শেষে একটি সিএসএস বিধি যুক্ত করার জন্য এটি আমার সমাধান:

var css = new function()
{
    function addStyleSheet()
    {
        let head = document.head;
        let style = document.createElement("style");

        head.appendChild(style);
    }

    this.insert = function(rule)
    {
        if(document.styleSheets.length == 0) { addStyleSheet(); }

        let sheet = document.styleSheets[document.styleSheets.length - 1];
        let rules = sheet.rules;

        sheet.insertRule(rule, rules.length);
    }
}

css.insert("body { background-color: red }");

Answer 10

আরেকটি বিকল্প হ'ল উপাদানটির ইন-লাইন শৈলীর বৈশিষ্ট্য সংরক্ষণ করতে, এতে যুক্ত হওয়া এবং তারপরে নতুন মানগুলির সাথে উপাদানটির শৈলীর বৈশিষ্ট্য আপডেট করার জন্য জ্যাকুয়ারি ব্যবহার করা। নিম্নরূপ:

function appendCSSToElement(element, CssProperties)
        {
            var existingCSS = $(element).attr("style");

             if(existingCSS == undefined) existingCSS = "";

            $.each(CssProperties, function(key,value)
            {
                existingCSS += " " + key + ": " + value + ";";
            });

            $(element).attr("style", existingCSS);

            return $(element);
        }

এবং তারপরে এটি একটি বস্তুরূপে নতুন সিএসএস অ্যাট্রিবিউট দিয়ে কার্যকর করুন।

appendCSSToElement("#ElementID", { "color": "white", "background-color": "green", "font-weight": "bold" });

এটি অগত্যা সর্বাধিক দক্ষ পদ্ধতি নাও হতে পারে (এটি কীভাবে উন্নত করা যায় সে সম্পর্কে আমি পরামর্শের জন্য উন্মুক্ত :) :)) তবে এটি অবশ্যই কার্যকরভাবে কাজ করে।

Answer 11

আপনাকে শুরু করতে এখানে সহায়তার জন্য একটি নমুনা টেম্পলেট রয়েছে

0 টি গ্রন্থাগার প্রয়োজন এবং এইচটিএমএল এবং সিএসএস উভয়ই ইনজেক্ট করতে জাভাস্ক্রিপ্ট ব্যবহার করে।

ফাংশনটি উপরের ব্যবহারকারী @ হুস্কির কাছ থেকে ধার করা হয়েছিল

আপনি যদি টেম্পারমনকি স্ক্রিপ্টটি চালাতে চান এবং কোনও ওয়েবসাইটে একটি টগল ওভারলে যুক্ত করতে চান তবে দরকারী (উদাহরণস্বরূপ একটি নোট অ্যাপ্লিকেশন)

// INJECTING THE HTML
document.querySelector('body').innerHTML += '<div id="injection">Hello World</div>';

// CSS INJECTION FUNCTION
///programming/707565/how-do-you-add-css-with-javascript
function insertCss( code ) {
    var style = document.createElement('style');
    style.type = 'text/css';
    if (style.styleSheet) {
        // IE
        style.styleSheet.cssText = code;
    } else {
        // Other browsers
        style.innerHTML = code;
    }
    document.getElementsByTagName("head")[0].appendChild( style );
}

// INJECT THE CSS INTO FUNCTION
// Write the css as you normally would... but treat it as strings and concatenate for multilines
insertCss(
  "#injection {color :red; font-size: 30px;}" +
  "body {background-color: lightblue;}"
)

Answer 12

আপনি যদি জানেন যে কমপক্ষে একটি <style>ট্যাগ পৃষ্ঠাতে বিদ্যমান রয়েছে তবে এই ফাংশনটি ব্যবহার করুন:

CSS=function(i){document.getElementsByTagName('style')[0].innerHTML+=i};

ব্যবহার:

CSS("div{background:#00F}");

Answer 13

এখানে আমার সাধারণ-উদ্দেশ্যমূলক ফাংশন যা সিএসএস নির্বাচক এবং নিয়মগুলিকে প্যারামিটারাইজ করে এবং বিকল্প পরিবর্তে কোনও সিএসএস ফাইলনাম (কেস-সংবেদনশীল) গ্রহণ করে যদি আপনি পরিবর্তে কোনও নির্দিষ্ট শীটে যুক্ত করতে চান (অন্যথায়, আপনি যদি সিএসএস ফাইলের নাম সরবরাহ না করেন তবে এটি একটি নতুন শৈল উপাদান তৈরি করবে এবং এটি বিদ্যমান মাথার সাথে সংযুক্ত করবে It এটি সর্বাধিক একটি নতুন শৈলীর উপাদান তৈরি করবে এবং এটি ভবিষ্যতের ফাংশন কলগুলিতে পুনরায় ব্যবহার করবে)। এফএফ, ক্রোম এবং আই 9 + (সম্ভবত খুব আগে, অনির্ধারিত) এর সাথে কাজ করে।

function addCssRules(selector, rules, /*Optional*/ sheetName) {
    // We want the last sheet so that rules are not overridden.
    var styleSheet = document.styleSheets[document.styleSheets.length - 1];
    if (sheetName) {
        for (var i in document.styleSheets) {
            if (document.styleSheets[i].href && document.styleSheets[i].href.indexOf(sheetName) > -1) {
                styleSheet = document.styleSheets[i];
                break;
            }
        }
    }
    if (typeof styleSheet === 'undefined' || styleSheet === null) {
        var styleElement = document.createElement("style");
        styleElement.type = "text/css";
        document.head.appendChild(styleElement);
        styleSheet = styleElement.sheet;
    }

    if (styleSheet) {
        if (styleSheet.insertRule)
            styleSheet.insertRule(selector + ' {' + rules + '}', styleSheet.cssRules.length);
        else if (styleSheet.addRule)
            styleSheet.addRule(selector, rules);
    }
}

Answer 14

.cssJquery মত ব্যবহার করুন$('strong').css('background','red');

$('strong').css('background','red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong> Example
</strong> 

Comments

জাভাস্ক্রিপ্ট, ওপি jQuery সম্পর্কে কিছুই

— বলেনি