Javascript ile nasıl CSS eklersiniz?

strong { color: red }Javascript kullanarak CSS kurallarını nasıl eklersiniz ?

Bunu DOM Level 2 CSS arayüzlerini ( MDN ) kullanarak da yapabilirsiniz :

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

... kendi doğal olarak farklı ifadelerini kullanan (doğal olarak) IE8 ve öncesi hariç:

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

Bunun, createElement-set-innerHTML yöntemine kıyasla teorik bir avantajı vardır, çünkü innerHTML'ye özel HTML karakterleri koymak konusunda endişelenmenize gerek yoktur, ancak pratikte stil öğeleri eski HTML'de CDATA'dır ve '<' ve '&', stil sayfalarında nadiren kullanılır.

Buna böyle eklemeye başlamadan önce bir stil sayfasına ihtiyacınız vardır. Mevcut herhangi bir aktif stil sayfası olabilir: harici, gömülü veya boş, önemli değil. Bir tane yoksa, şu anda oluşturmanın tek standart yolu createElement'dir.

Basit ve doğrudan yaklaşım, stylebelgeye yeni bir düğüm oluşturmak ve eklemek için kullanılır.

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

Ben Blank'in çözümü IE8'de benim için işe yaramazdı.

Ancak bu IE8'de işe yaradı

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

İşte yeni bir metin düğümü oluşturmak yerine kullanabileceğinizi göz önünde bulundurarak Chris Herring'in çözümünün biraz güncellenmiş bir sürümü 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 );
}

En Kısa Bir Astar

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

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

Öğeleri öğelere göre sınıflar veya stil nitelikleri ekleyebilirsiniz.

Örneğin:

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

Bunu yapabileceğiniz yerde. Style.background, this.style.font-size, vs. Aynı yöntemi ala kullanarak bir stil de uygulayabilirsiniz

this.className='classname';

Bunu bir javascript işlevinde yapmak istiyorsanız, 'this' yerine getElementByID kullanabilirsiniz.

<style>Html başına eklemek kolay bu örnek

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

Kaynak Dinamik stili - CSS'yi JavaScript ile değiştirme

YUI kısa süre önce özellikle bunun için bir yardımcı program ekledi . Burada stylesheet.js dosyasına bakın .

Bu, son stil sayfası listesinin sonuna bir css kuralı eklemek için benim çözümüm:

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

Başka bir seçenek de, öğenin satır içi stil özelliğini depolamak, eklemek ve sonra öğenin style özelliğini yeni değerlerle güncellemek için JQuery kullanmaktır. Aşağıdaki gibi:

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

Ve sonra bunu nesne olarak yeni CSS öznitelikleriyle yürütün.

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

Bu mutlaka en etkili yöntem olmayabilir (bunu nasıl geliştireceğime dair önerilere açığım. :)), ama kesinlikle işe yarıyor.

İşte başlamanıza yardımcı olacak örnek bir şablon

0 kitaplık gerektirir ve hem HTML hem de CSS'yi enjekte etmek için yalnızca javascript kullanır.

İşlev yukarıdaki @Husky kullanıcısından ödünç alındı.

Bir tampermonkey komut dosyası çalıştırmak istiyorsanız ve bir web sitesine bir geçiş kaplaması eklemek istiyorsanız yararlıdır (örneğin, bir not uygulaması)

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

<style>sayfada en az bir etiket olduğunu biliyorsanız, bu işlevi kullanın:

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

kullanım:

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

İşte CSS seçicisini ve kurallarını parametreleştiren genel bir işlevim ve bunun yerine belirli bir sayfaya eklemek isterseniz (isteğe bağlı olarak bir css dosya adını (büyük / küçük harf duyarlı) alır (aksi takdirde bir CSS dosya adı sağlamazsanız, yeni bir stil öğesi oluşturur ve mevcut başlığa ekler. En fazla bir yeni stil öğesi yapar ve gelecekteki işlev çağrılarında yeniden kullanır). FF, Chrome ve IE9 + ile çalışır (belki daha önce de test edilmemiştir).

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

kullanmak .cssjQuery gibi$('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>