问题描述
我正在使用jquery在按下按钮时修改div元素的css。我注意到CSS内联到HTML。我怎样才能防止风格变得内联？
< style media =data-href =../。 ./dist/css/flat-ui.css\">...</style>
这些样式标签出现在渲染中。
我使用jquery在按下按钮时修改div元素的css。
最明显的当然是用一个预定义的规则添加/删除/切换一个类，就像这样，
CSS
.wider {
width：500px;
}
脚本
$（element）.toggleClass（wide）;
但如果这不符合您的需求，您可以动态添加样式元素来覆盖现有规则
JS
函数loadStyle（css）{
var style = document.querySelector（'style [id =lastinbody]'）||使用document.createElement（风格）;
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;}'）;
如果您想将样式添加到 JS 头部
$ b pre $函数loadStyle（$ c $> $ c $，$像这样做
var style = document.querySelector（'head style [id =addedinhead]'）||使用document.createElement（风格）;
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 =stylesheettype =text / csshref =style.css>
< / head>
JS
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）;
$ b setStyleSheetRule（'customCSS'，'.have-border {border：1px solid black;}'）
code> 了解更多：
I am using jquery to modify css of a div element on pressing a button. I noticed the css getting inline to the HTML. How can I prevent the style from getting inline ?
<style media="" data-href="../../dist/css/flat-ui.css">...</style>
These style tags appear on rendering.
The most obvious would of course be to add/remove/toggle a class with a predefined rule, like this,
CSS
.wider {
width: 500px;
}
Script
$( "element" ).toggleClass( "wider" );
but if that is not what you look for, you can add a style element dynamically, to override an existing rule
JS
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);
}
Usage
loadStyle('.item { color: red; }');
If you want the style being added to the head, do like this
JS
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);
}
And here is how to push a CSS file
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);
And this one shows how to add to an existing linked stylesheet
HTML
<head>
<link title="customCSS" rel="stylesheet" type="text/css" href="style.css">
</head>
JS
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;}')
Read more: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule
这篇关于如何防止将css转换为内联css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！