web-dev-qa-db-fra.com

Comment charger CSS en utilisant jquery

J'ai chargé un fichier CSS sur le serveur, j'ai donc une URL avec moi. Comment puis-je le charger dans mon code Perl en utilisant JQuery?

Donc actuellement, je code en dur le CSS dans ma page Mason qui manque dans la page quelque chose comme ça

JQ.onReady('show', function(){
    JQ.addStyles({styles: ["\n\n.ap_classic { border-top:1px solid #ccc;border-left:1px solid #ccc;border-bottom:1px solid #2F2F1D; border-right:1px solid   #2F2F1D;background-color:#EFEDD4;padding:3px; }  .ap_classic .ap_titlebar { color:#86875D;font-size:12px;padding:0 0 3px 0;line-height:1em; }  .ap_classic .ap_close { float:right; }  .ap_classic .ap_content { clear:both;background-color:white;border:1px solid #ACA976;padding:8px;font-size:11px; } "]});
});

Je veux éviter de coder en dur ce CSS?

jqueryhtmlcssstylesheet
53
TopCoder

Je ne comprends pas pourquoi vous ne pouvez pas simplement insérer le <link/> élément dans le <head/> section, mais voici un extrait de jQuery:

$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'your stylesheet url') );
76
pawel

Encore une fois, selon le chargement dynamique de la feuille de style CSS ne fonctionne pas sur IE .

Vous devez définir l'attribut href en dernier et uniquement après avoir ajouté l'élément de lien à la tête:

$('<link>')
  .appendTo('head')
  .attr({
      type: 'text/css', 
      rel: 'stylesheet',
      href: '/css/your_css_file.css'
  });
41
ekerner
$(document).ready(function(){
    console.log("ready!");
var e=$("<link>",{
    rel:"stylesheet",
    type:"text/css",
    href:"/your/css/file.css"})[0];
e.onload=function(){
console.log("CSS IN IFRAME LOADED")},
document.getElementsByTagName("head")[0].
appendChild(e)});
0
EMW

J'aime être cohérent sur la langue et le type de fichier (ex: ne pas mélanger CSS avec HTML). Je voudrais donc créer un fichier style.css et le charger dans une balise avec jQuery.

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div>
        <style id="import"></style>
        <h2 class="red">this is red</h2>
    </div>
    <script type="text/javascript">
        $( document ).ready(function() {
            $( "#import" ).load( "./style.css" );
        });
    </script>
</body>
</html>

style.css

.red{
    color: red;
}
0
Tudor Morar