How to prevent css from getting converted to inline css

Question

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.

Appending inline styles, It is the only way to modify css with jQuery (JavaScript). You can't change value in the css file on the fly. — Ajay Narain Mathur, Jan 23 '17 at 06:37
If your CSS is static, then you can add the styles in an id/class and then assign them in `jquery` using `addClass()`. — Shashank, Jan 23 '17 at 07:35
When you say _I noticed the css getting inline to the HTML_, do you mean in the `body` element? .. You can control where it gets added, but the question is: "What problem are you trying to solve?" — Asons, Jan 23 '17 at 08:30
Don't know what the issue is with jquery adding inline styles, but if you really want to avoid this you should be using addClass() like @Shashank is suggesting. — Wim Mertens, Jan 23 '17 at 08:56
@Terry Yes, think so too ... so I asked what problem the OP try to solve — Asons, Jan 23 '17 at 09:22
@LGSon I am increasing the width of the div element on pressing the button. So, I've used css() to push the changes. — Karthick, Jan 23 '17 at 10:22
Ok, check my answer, updated with the simplest way _and_ some more advanced one's — Asons, Jan 23 '17 at 10:39
Could you let me know what is not working with the answer a gave, so I will be able to adjust and you to accept? — Asons, Jan 28 '17 at 07:26

score 0 · Answer 1 · answered Jan 23 '17 at 06:21

0

Link your stylesheet in head

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

answered Jan 23 '17 at 06:21

Rahul

493
6
27

Yes, I've already done that. The style tag get appended while rendering. It makes sense to become inline because that's the only way jquery can dynamically push css. – Karthick Jan 23 '17 at 06:28
You're right and there is no way(that I know of) to prevent that from happening. – Rahul Jan 23 '17 at 06:46

Asons · Answer 2 · 2017-01-23T10:37:50.037

I am using jquery to modify css of a div element on pressing a button.

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

I noticed the css getting inline to the HTML.

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

How to prevent css from getting converted to inline css

2 Answers2

Linked