Bagaimana Anda menambahkan CSS dengan Javascript?

Bagaimana Anda menambahkan aturan CSS (misalnya strong { color: red }) dengan menggunakan Javascript?

Anda juga dapat melakukan ini menggunakan antarmuka CSS DOM Level 2 ( MDN ):

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

... pada semua kecuali (secara alami) IE8 dan sebelumnya, yang menggunakan kata-katanya yang sedikit berbeda:

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

Ada keuntungan teoretis dalam hal ini dibandingkan dengan metode createElement-set-innerHTML, di mana Anda tidak perlu khawatir tentang menempatkan karakter HTML khusus di innerHTML, tetapi dalam praktiknya elemen gaya adalah CDATA dalam HTML lawas, dan '<' dan '&' jarang digunakan dalam stylesheet.

Anda memang membutuhkan stylesheet sebelum Anda dapat mulai menambahkannya seperti ini. Itu bisa berupa stylesheet aktif apa pun yang ada: eksternal, tertanam atau kosong, tidak masalah. Jika tidak ada, satu-satunya cara standar untuk membuatnya saat ini adalah dengan createElement.

Pendekatan sederhana dan langsung adalah membuat dan menambahkan stylesimpul baru ke dokumen.

// 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)

Solusi oleh Ben Blank tidak akan bekerja di IE8 untuk saya.

Namun ini berhasil di IE8

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);
}

Berikut ini adalah versi yang sedikit diperbarui dari solusi Chris Herring , dengan mempertimbangkan bahwa Anda juga dapat menggunakan innerHTMLdaripada membuat simpul teks baru:

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 );
}

Satu Liner Terpendek

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

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

Anda bisa menambahkan atribut kelas atau gaya pada elemen demi elemen.

Sebagai contoh:

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

Di mana Anda bisa melakukan this.style.background, this.style.font-size, dll. Anda juga dapat menerapkan gaya menggunakan metode yang sama ala

this.className='classname';

Jika Anda ingin melakukan ini dalam fungsi javascript, Anda bisa menggunakan getElementByID daripada 'ini'.

Ini contoh mudah menambahkan <style>kepala html

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

Source Dynamic style - memanipulasi CSS dengan JavaScript

YUI baru-baru ini menambahkan utilitas khusus untuk ini. Lihat stylesheet.js di sini.

Ini solusi saya untuk menambahkan aturan css di akhir daftar style sheet terakhir:

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 }");

Opsi lain adalah menggunakan JQuery untuk menyimpan properti gaya in-line elemen, menambahkannya, dan kemudian memperbarui properti gaya elemen dengan nilai-nilai baru. Sebagai berikut:

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);
        }

Dan kemudian jalankan dengan atribut CSS baru sebagai objek.

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

Ini mungkin tidak selalu menjadi metode yang paling efisien (saya terbuka untuk saran tentang cara meningkatkan ini. :)), tetapi pasti berhasil.

Berikut contoh template untuk membantu Anda memulai

Membutuhkan 0 pustaka dan hanya menggunakan javascript untuk menyuntikkan HTML dan CSS.

Fungsi itu dipinjam dari pengguna @Husky di atas

Berguna jika Anda ingin menjalankan skrip tampermonkey dan ingin menambahkan toggle overlay pada situs web (misalnya aplikasi note, misalnya)

// 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;}"
)

jika Anda tahu setidaknya ada satu <style>tag di halaman, gunakan fungsi ini:

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

penggunaan:

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

Inilah fungsi tujuan umum saya yang menentukan parametrize pemilih dan aturan CSS, dan secara opsional menggunakan nama file css (case-sensitive) jika Anda ingin menambahkan ke sheet tertentu (jika tidak, jika Anda tidak memberikan nama file CSS, itu akan membuat elemen gaya baru dan menambahkannya ke kepala yang ada. Ini akan membuat paling banyak satu elemen gaya baru dan menggunakannya kembali pada panggilan fungsi di masa depan). Bekerja dengan FF, Chrome, dan IE9 + (mungkin lebih awal juga, belum diuji).

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);
    }
}

gunakan .cssdi Jquery seperti$('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>