Làm thế nào để bạn thêm CSS với Javascript?

Làm thế nào để bạn thêm các quy tắc CSS (ví dụ strong { color: red }) bằng cách sử dụng Javascript?

Bạn cũng có thể thực hiện việc này bằng các giao diện CSS Cấp 2 của DOM ( MDN ):

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

... trên tất cả trừ (tự nhiên) IE8 và trước đó, sử dụng từ ngữ khác biệt nhỏ của riêng nó:

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

Có một lợi thế về mặt lý thuyết so với phương thức createdEuity-set-InternalHTML, ở chỗ bạn không phải lo lắng về việc đưa các ký tự HTML đặc biệt vào bên trongHTML, nhưng trong các thành phần kiểu thực tế là CDATA trong HTML kế thừa và '<' và '&' hiếm khi được sử dụng trong biểu định kiểu.

Bạn cần có một bản định kiểu tại chỗ trước khi bạn có thể bắt đầu nối thêm nó như thế này. Đó có thể là bất kỳ biểu định kiểu hoạt động hiện có nào: bên ngoài, được nhúng hoặc trống, không thành vấn đề. Nếu không có, cách tiêu chuẩn duy nhất để tạo nó vào lúc này là với createdEuity.

Cách tiếp cận đơn giản và trực tiếp là tạo và thêm một stylenút mới vào tài liệu.

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

Giải pháp của Ben Blank sẽ không hoạt động trong IE8 cho tôi.

Tuy nhiên, điều này đã làm việc trong 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);
}

Đây là phiên bản cập nhật một chút của giải pháp của Chris Herring , có tính đến việc bạn cũng có thể sử dụng innerHTMLthay vì tạo một nút văn bản mới:

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

Một lớp lót ngắn nhất

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

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

Bạn có thể thêm các lớp hoặc thuộc tính kiểu trên một phần tử theo cơ sở phần tử.

Ví dụ:

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

Nơi bạn có thể làm this.style.background, this.style.font-size, v.v. Bạn cũng có thể áp dụng một kiểu sử dụng cùng phương thức này ala

this.className='classname';

Nếu bạn muốn làm điều này trong một hàm javascript, bạn có thể sử dụng getEuityByID thay vì 'this'.

Ví dụ dễ dàng này về việc thêm <style>vào đầu 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

Nguồn kiểu động - thao tác CSS với JavaScript

YUI vừa mới thêm một tiện ích dành riêng cho việc này. Xem biểu định kiểu tại đây.

Đây là giải pháp của tôi để thêm quy tắc css vào cuối danh sách biểu định kiểu cuối cùng:

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

Một tùy chọn khác là sử dụng JQuery để lưu trữ thuộc tính kiểu trong dòng của phần tử, nối vào nó và sau đó cập nhật thuộc tính kiểu của phần tử với các giá trị mới. Như sau:

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

Và sau đó thực hiện nó với các thuộc tính CSS mới như là một đối tượng.

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

Đây có thể không nhất thiết là phương pháp hiệu quả nhất (Tôi sẵn sàng để đề xuất về cách cải thiện điều này. :)), nhưng nó chắc chắn hoạt động.

Đây là một mẫu mẫu để giúp bạn bắt đầu

Yêu cầu 0 thư viện và chỉ sử dụng javascript để tiêm cả HTML và CSS.

Hàm được mượn từ người dùng @Husky ở trên

Hữu ích nếu bạn muốn chạy tập lệnh tampermonkey và muốn thêm lớp phủ chuyển đổi trên trang web (ví dụ: ứng dụng ghi chú chẳng hạn)

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

nếu bạn biết ít nhất một <style>thẻ tồn tại trong trang, hãy sử dụng chức năng này:

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

sử dụng :

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

Đây là chức năng mục đích chung của tôi, tham số bộ chọn và quy tắc CSS, và tùy ý lấy tên tệp css (phân biệt chữ hoa chữ thường) nếu bạn muốn thêm vào một trang cụ thể thay vào đó (nếu không, nếu bạn không cung cấp tên tệp CSS, thì nó sẽ tạo một phần tử kiểu mới và nối nó vào phần đầu hiện có. Nó sẽ tạo tối đa một phần tử kiểu mới và sử dụng lại nó trong các lệnh gọi hàm trong tương lai). Hoạt động với FF, Chrome và IE9 + (có thể sớm hơn, chưa được kiểm tra).

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

sử dụng .csstrong Jquery như$('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>