CODEWITHSUNDEEP
javascripthtmlcss
www139
www139

Reputation: 5227

JavaScript getComputedStyle without source element?

In essence, I am trying to use the getComputedStyle to get a property value without having access to the element (directly). Please read the description below for further details.

This is difficult to explain so please tell me if you don't understand.

Here is my CSS code:

.yScrollButton{
    background-color:#aaa;
    width:100%;
    position:absolute;
    top:0;
    min-height:30px;
}
.xScrollButton{
    background-color:#aaa;
    height:100%;
    position:absolute;
    top:0;
    min-width:30px;
}

The elements linked to the these classes are generated with JavaScript. How do I get the min-width:30px; or min-width:30px; property values without using an element to find them. Usually for this situation, you use getComputedStyle https://stackoverflow.com/a/18676007/3011082 but in this situation I can't get the the source element for the computed style (see example below)! 

var yourDiv = document.getElementById("some-id");
getComputedStyle(yourDiv).getPropertyValue("margin-top")

Again, this is confusing so please tell me if you don't understand :) The solution must be in only JavaScript, no JQuery.

Now that I think about it, a better way to understand this question is to use 

var yourDiv = document.getElementById("some-id");
    getComputedStyle(yourDiv).getPropertyValue("margin-top")

without the yourDiv element.

Thank you.

Upvotes: 2

Views: 2708

Answers (2)

CoderPi
CoderPi

Reputation: 13211

var div = document.createElement("div")
div.className = "yScrollButton" // or xScrollButton
getComputedStyle(div).getPropertyValue("min-width")

is that what you are looking for?

Edit: Maybe you have to add it to DOM first (by @Phil): Here is how to do it without altering attributes of the original element. You could also skip the hiddenDiv, and set display = "none" on the div itself

var hiddenDiv = document.createElement("div")
hiddenDiv.style.display = "none"
document.body.appendChild(hiddenDiv)

var div = document.createElement("div")
hiddenDiv.appendChild(div)

div.className = "yScrollButton" // or xScrollButton
getComputedStyle(div).getPropertyValue("min-width")

hiddenDiv.parentNode.removeChild(hiddenDiv)

short:

var div = document.createElement("div")
div.style.display = "none"
document.body.appendChild(div)

div.className = "yScrollButton" // or xScrollButton
getComputedStyle(div).getPropertyValue("min-width")

div.parentNode.removeChild(div)

Upvotes: 4

Phil
Phil

Reputation: 164832

Creating a temporary element would be the way I'd go but (in my tests at least), you have to insert the element into the document (hence the display = 'none')

function getStyle() {
  var e = document.createElement('div');
  e.className = 'foo';
  e.style.display = 'none';
  document.body.appendChild(e);

  var style = window.getComputedStyle(e),
    obj = {
      'min-width': style['min-width'],
      'min-height': style['min-height']
    };
  document.getElementById('out').innerHTML = JSON.stringify(obj, null, '  ');
  document.body.removeChild(e);
}
.foo {
  min-width: 30px;
  min-height: 30px;
}
<button onclick="getStyle()" type="button">Get <code>.foo</code> style</button>

<pre id="out"></pre>

Upvotes: 2

Related Questions