2016-07-20 4 views
1

können wir den Stil oder andere Tag mitKönnen wir eine CSS-Selektor-Regel mit JQuery oder Javascript erstellen?

var st = document.createElement("style"); 

erstellen und sogar die gleiche

body.append(st); 

an Körper anhängen und es wird

<body><style></style></body> 

Ich möchte wissen, schaffen wir Stil setzen in style tag mit javascript auch nicht einfache regeln, ich weiß es gibt $ ("selektor"). css() funktion ist da, die css regeln auf selektor anwenden kann, aber ich will ein bisschen stärker Regel und ich möchte in der Art Tag hinzuzufügen Ich habe gerade,

etwas wie folgt aus:

<style> 
    div.bar { 
     text-align: center; 
     color: red; 
    } 
</style> 

st.innerHtml oder st.innerText nicht einlassen mir diese Werte gesetzt.

Hinweis: Dies wurde nur in der Browser-Konsole angefordert.

+0

warum bestimmten Stil-Klasse mit nicht hinzufügen – guradio

+0

@guradio in der Regel lese ich das gleiche, aber es wurde in einem Interview gefragt mich, dies zu tun?. und Interviewer bestand darauf, nur so zu tun – Mohit

Antwort

2

Sie können einfach jquery .text Methode wie

const cssCode = `div.bar { 
    text-align: center; 
    color: red; 
}` 
$('style-tag-selector').text(cssCode) 

aber meiner Meinung nach verwenden, whetever Ihr Ziel ist - diese Lösung ist nicht in Ordnung ist. Sie sollten sich nicht über JavaScript mit CSS anlegen.

Am besten ist es, Stile in separat geladenen. CSS-Datei haben und dann können Sie Klassen zu Elementen mit Javascript wechseln.

+0

Eigentlich wurde es mir in einem Interview gebeten, folge ich normalerweise nicht diesem Ansatz, Danke deine Antwort funktionierte – Mohit

2

Sie Ihre CSS direkt im Style-Tag hinzufügen und sie an den Kopf Ihrer Seite anhängen:

$("head").append("<style>div.bar {text-align: center; color: red}</style>"); 

Sie mehrere Style-Tags mit CSS im Kopf Sie untereinander, auf diese Weise anhängen kann frühere Syle überschreiben, aber es ist keine Best Practice.

Ich bevorzuge es, Ihre Stile in separaten Dateien zu haben und zu verwalten, ob die Dateien in Ihrem Code enthalten sind oder nicht.

1

Eigentlich gibt es dafür eine Schnittstelle. Um zum Beispiel eines Stilelement hinzufügen und eine Regel, um es hinzuzufügen (dies etwas mit der Klasse führt should-be-red rot.

var styleElement = document.createElement('style'); 
document.head.appendChild(styleElement); 
var sheet = styleElement.sheet; 
sheet.insertRule('.should-be-red { color: red; }', 0); 

Sie können über die Regeln durchlaufen und Einfügen/Löschen Regeln und spannende Dinge wie die .

Mehr Info: https://developer.mozilla.org/en-US/docs/Web/API/CSSStylesheet

jsbin: https://jsbin.com/jodiro/1/edit?html,js,output

Verwandte Themen