如何防止將css轉換爲內聯css

我正在使用jquery在按下按鈕時修改div元素的css。我注意到CSS內聯到HTML。我怎樣才能防止風格變得內聯？如何防止將css轉換爲內聯css

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

這些樣式標籤出現在渲染上。

來源

2017-01-23 Karthick

追加內嵌樣式，它是唯一的出路用jQuery（JavaScript）修改css。您無法即時更改css文件中的值。 –

完全明白，有沒有解決辦法？ – Karthick

沒有我知道的 –

將您stylesheet頭

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

來源

2017-01-23 06:21:29 Rahul

是的，我已經做到了。樣式標記在渲染時被附加。這是有道理的，因爲這是jquery可以動態推送css的唯一方法。 – Karthick

你是對的，沒有辦法（我知道）防止這種情況發生。 – Rahul

我使用jQuery修改div元素的CSS上按下一個按鈕。

最明顯的當然會是添加/刪除/切換類預定義的規則，這樣，

CSS

.wider { 
    width: 500px; 
}

腳本

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

但如果這不符合您的要求，則可以動態添加樣式元素，以覆蓋現有規則

個

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

使用

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

我注意到的CSS得到內嵌到HTML。

如果你想加入到head風格，做這樣的

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

這裏是如何把一個CSS文件

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

而這其中說明了如何添加到現有的鏈接的樣式表

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

來源

2017-01-23 07:05:05 LGSon

如何防止將css轉換爲內聯css

回答

相關問題