Inherited CSS Values via JavaScript

Inherited CSS Values via Javascript

You'll want to use getComputedStyle.

The .style property is a means of accessing and setting inline style (i.e. like the style attribute).

Note, however, that your example has nothing to do with inheritance. Just rule-sets that apply directly to the elements you are interested in. Inheritance is when an element takes on the same style as its parent via the inherit keyword.

span {
    color: inherit;
}

getComputedStyle will give the final computed value though, so it will pick up inherited values too.

How can I get the inherited CSS value using Javascript?

There's no way to get the percentage value I'm afraid. You can try something like this:

var widthpx = getComputedStyle($('#mydiv')[0]).width;
var parentWidth = $('#mydiv').parent().css('width')

var width = ( 100 * parseFloat(widthpx) / parseFloat(parentWidth) ) + '%';

How to get the inherited values of element from JavaScript

You can simply implement a pixel-to-rem converter and use that:

function convertPixelsToRem(pixels) {
    return ((pixels.replace("px", "") / getComputedStyle(document.documentElement).fontSize.replace("px", "")) + "rem");
}

console.log(convertPixelsToRem(window.getDefaultComputedStyle(document.getElementById("new").querySelector(".h1"))["font-size"]));

<style>
  #new {
    font-size: 2rem;
  }
</style>

<div id="new">
  <h1 class="h1">This is a heading</h1>
  <!–– Here h1 is inheriting font-size from div ––>
</div>

How to inherit CSS properties of parent Element using JavaScript?

Is this what you mean?

const container = document.getElementById("listed-books-container");

function addBook() {
  const listedBook = document.createElement('div');
  listedBook.classList.add('listed-book');
  container.append(listedBook);
}

.listed-book {
  display: grid;
  height: 75px;
  width: 1200px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 4.5rem;
  grid-row-gap: 1rem;
  color: black;
  border: 1px solid black;
}

<button onclick="addBook()">Add Book</button>
<div id="listed-books-container">

</div>

Get element from which CSS rule is being inherited

Walk up the parentElement chain checking the css() value of each element. The first element with a parent().css() value that's different is (probably) the element being targeted by the CSS rule selector.

See this fiddle for an example: http://jsfiddle.net/broofa/VPWV9/2/ (See the console.log output)

(Note: there are almost surely complex cases where this won't work as expected but for the case as described, it works.)

Ignore/override surrounding / inherited CSS

Add a class to elements which you want to reset..and then apply all:unset to that class

The all CSS shorthand property sets all of an element's properties (apart from unicode-bidi and direction) to their initial or inherited values, or to the values specified in another style sheet origin.

---

...all:unset

Specifies that all the element's properties should be changed to their inherited values if they inherit by default, or to their initial values if not.(It will ignore all the user agent style too.)

Stack Snippet

let p = document.createElement('p');p.style.color = "red";p.innerHTML = "Hello"; // some pre-defined HTML stringp.classList.add("reset");document.body.insertBefore(p, document.body.firstChild);

p {  background: black;}
.reset {  all: unset;}

How to inherit from a css file in react

you are missing import in .js file:

import '<<your scss path>>';

---

Related Topics