Wie zu verhindern, CSS in Inline-CSS konvertiert werden

Ich benutze jquery, um CSS eines div-Elements auf Knopfdruck zu ändern. Ich bemerkte, dass die CSS inline zum HTML kam. Wie kann ich verhindern, dass der Style inline wird?Wie zu verhindern, CSS in Inline-CSS konvertiert werden

<style media="" data-href="../../dist/css/flat-ui.css">...</style>

Diese Style-Tags werden beim Rendern angezeigt.

Quelle

2017-01-23 Karthick

Anfügen Inline-Styles, es ist der einzige Weg, CSS mit jQuery (JavaScript) ändern. Sie können den Wert in der CSS-Datei nicht ändern. –

Bekomme es komplett, gibt es eine Arbeit um? – Karthick

Keine, die ich kenne –

Verknüpfen Sie Ihr stylesheet in Kopf

<head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head>

Quelle

2017-01-23 06:21:29 Rahul

Ja, das habe ich schon gemacht. Das Style-Tag wird beim Rendern angehängt. Es macht Sinn, inline zu werden, denn nur so kann jquery css dynamisch pushen. – Karthick

Sie haben Recht, und es gibt keine Möglichkeit, das zu verhindern. – Rahul

ich jquery bin mit CSS eines div-Elements zu ändern, auf Knopfdruck.

Die naheliegendste wäre natürlich hinzufügen/entfernen/wechseln eine Klasse mit einer vordefinierten Regel, wie diese,

CSS

.wider { 
    width: 500px; 
}

Script

$("element").toggleClass("wider");

aber Wenn Sie nicht danach suchen, können Sie ein Stilelement dynamisch hinzufügen, um eine vorhandene Regel zu überschreiben

function loadStyle(css) { 
    var style = document.querySelector('style[id="lastinbody"]') || document.createElement('style'); 
    style.id = 'lastinbody'; 
    style.type = 'text/css'; 
    if (style.styleSheet){ 
    style.styleSheet.cssText = css; 
    } else { 
    style.appendChild(document.createTextNode(css)); 
    } 
    document.querySelector('body').appendChild(style); 
}

Nutzungs

loadStyle('.item { color: red; }');

bemerkte ich die CSS HTML immer inline.

Wenn Sie den Stil wollen die head hinzugefügt, tun wie dieser

function loadStyle(css) { 
    var style = document.querySelector('head style[id="addedinhead"]') || document.createElement('style'); 
    style.id = 'addedinhead'; 
    style.type = 'text/css'; 
    if (style.styleSheet){ 
    style.styleSheet.cssText = css; 
    } else { 
    style.appendChild(document.createTextNode(css)); 
    } 
    document.querySelector('head').appendChild(style); 
}

Und hier ist wie eine CSS-Datei schieben

var style = document.createElement('link'); 
style.rel = 'stylesheet'; 
style.type = 'text/css'; 
style.media = 'screen'; 
style.href = 'css-file-path'; 
document.querySelector('head').appendChild(style);

Und dieser zeigt, wie man ein bestehendes verknüpft Sheet

HTML

<head> 
    <link title="customCSS" rel="stylesheet" type="text/css" href="style.css"> 
</head>

function setStyleSheetRule(title, rule) { 
    for(var i=0; i<document.styleSheets.length; i++) { 
    var sheet = document.styleSheets[i]; 
    if(sheet.title == title) { 
     sheet.insertRule(rule, sheet.cssRules.length); 
    } 
    } 
} 

setStyleSheetRule('customCSS', '.have-border { border: 1px solid black;}')

Lesen Sie mehr hinzuzufügen: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule

Quelle

2017-01-23 07:05:05 LGSon

Wie zu verhindern, CSS in Inline-CSS konvertiert werden

Antwort

Verwandte Themen