CSS Style to Inline Style via JavaScript

Add inline style using Javascript

nFilter.style.width = '330px';
nFilter.style.float = 'left';

This should add an inline style to the element.

Convert css styles to inline styles with javascript keeping the style units

Couldn't find any way to do this using the built in getComputedStyle(). It also returned too many properties that I wasn't interested in. So I came up with a different approach. Basically to use the same function to loop through an element (and maybe all its children elements) and the use Element.matches() to get all the css rules that apply to the element and apply the properties as they were specified in the stylesheet.

I modified this answer a bit to get the rules from the stylesheet.

Has the added benefit that we can pull either from all the document stylesheets or just from a specific one that is needed for preparing the code to go into our content management systems's rich text editor.

function applyInline(element, recursive = true) {

  if (!element) {
    throw new Error("No element specified.");
  }

  const matches = matchRules(element);

  // we need to preserve any pre-existing inline styles.
  var srcRules = document.createElement(element.tagName).style;
  srcRules.cssText = element.style.cssText;

  matches.forEach(rule => {
    for (var prop of rule.style) {

      let val = srcRules.getPropertyValue(prop) || rule.style.getPropertyValue(prop);
      let priority = rule.style.getPropertyPriority(prop);

      element.style.setProperty(prop,val,priority);
    }
  });

  if (recursive) {
    element.children.forEach(child => {
      applyInline(child, recursive);
    });
  }
}

function matchRules(el, sheets) {
  sheets = sheets || document.styleSheets;
  var ret = [];

  for (var i in sheets) {
    if (sheets.hasOwnProperty(i)) {
      var rules = sheets[i].rules || sheets[i].cssRules;
      for (var r in rules) {
        if (el.matches(rules[r].selectorText)) {
          ret.push(rules[r]);
        }
      }
    }
  }
  return ret;
}

CSS style to inline style via JavaScript

You can do something like this:

function applyStyle(el) {
    s = getComputedStyle(el);

    for (let key in s) {
        let prop = key.replace(/\-([a-z])/g, v => v[1].toUpperCase());
        el.style[prop] = s[key];
    }
}

let x = document.getElementById('my-id');
applyStyle(x);

Where x is the element you want to apply the style to.

Basically this function gets the computed style of the element and then copies each property (like padding, background, color, etc.) to the inline style of the element.

I don't know why you need to do this, but it's a really dirty approach in my opinion. I would personally advise against it.

How to set inline CSS of element to default using javascript?

You can get inline CSS in style attribute of element using getAttribute() and store it in variable and on check/uncheck of checkbox insert and remove it from style attribute

var checkBox = document.querySelector('#form input[name=termsCheckBox]'),    terms = document.getElementById('termsText'),    style = terms.getAttribute('style');
checkBox.addEventListener('click', function(){  if (checkBox.checked)    terms.style.cssText = "color:black; font-weight:normal";  else    terms.style.cssText = style;});

<form id="form">  <input type="checkbox" name="termsCheckBox">  <textarea id="termsText" style="color:red; font-weight:bold">termsText</textarea></form>

Using javascript to edit class (not inline styles on elements)

Better place a identity (attribute, id, name) on the style element, so you can target the particular style (DOM) element (will be helpfull when there are many), and then replacethe inner html
eg:

<style id="targetStyle">
  .something{
    height : 100px;
  }
</style>

and then in your javascript

var styleDom = document.getElementById('targetStyle');
styleDom.innerHTML = styleDom.innerHTML.replace(/height.*px;/,'height: 85px;');

Build the Regex properly according to your use case, its just a rough example to describe on the part how you can achive this, instead how to replace a string in depth.

---

Related Topics