JavaScript getComputedStyle without source element?

Question

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.

I actually can but it would be much more efficient in my algorithm to get that information before everything else executes. — www139, Nov 23 '15 at 01:52
You know jQuery is entirely written in JavaScript so saying *"must be in only JavaScript, no JQuery"* doesn't really make much sense — Phil, Nov 23 '15 at 02:14
@Phil I know that but I am making a plugin that I don't want to rely on JQuery. — www139, Nov 23 '15 at 02:15
Why do you want to do this? Is it not an option to look through the stylesheets? — , Nov 23 '15 at 03:42

CoderPi · Accepted Answer · 2015-11-24T08:37:37.300

3

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)

edited Nov 24 '15 at 08:37

answered Nov 23 '15 at 01:54

CoderPi

12,985
4
34
62

2

Yes, I think this should work. Creates an in-memory element and reads it's by-class computed styles. – Roko C. Buljan Nov 23 '15 at 01:55
@CodeiSir Awesome! Looks great. I'll look and see if I can successfully implement it. Thank you ;) – www139 Nov 23 '15 at 01:56
1

I found I had to add the temporary element to the document before `getComputedStyle` returned anything useful – Phil Nov 23 '15 at 02:03
@RokoC.Buljan works brilliantly! I ended up using your first solution because it was simpler and worked better for me. I am making a plugin with this script so low amount of code is a high priority. Thank you. Wonderful answer :) – www139 Nov 23 '15 at 02:19
@www139 the answer is not mine (though I was about to answer the same ;) ) – Roko C. Buljan Nov 23 '15 at 02:23
Oh, lol, sorry I read the wrong name! How dumb of me :) (sorry I meant @CodeiSir for the record). – www139 Nov 23 '15 at 02:24

score 2 · Answer 2 · answered Nov 23 '15 at 02:00

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>

JavaScript getComputedStyle without source element?

2 Answers2