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
– Ajay Narain Mathur, Commented Jan 23, 2017 at 6: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
– Shashank, Commented Jan 23, 2017 at 7: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
– Asons, Commented Jan 23, 2017 at 8:30

Rahul · Accepted Answer · 2017-01-23 06:21:29Z

0

Link your stylesheet in head

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

answered Jan 23, 2017 at 6:21

Rahul

5187 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Karthick Over a year ago

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.

Rahul Over a year ago

You're right and there is no way(that I know of) to prevent that from happening.

Asons · Accepted Answer · 2017-01-23 10:37:50Z

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

Collectives™ on Stack Overflow

How to prevent css from getting converted to inline css

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related