How to know parent / container style using Javascript?

Question

I get idea from :

Can you check an object's CSS display with JavaScript?

Now look to my code below :

HTML :

<div style="display: none">
 <input type="text" id="myInput" value="5">
</div>

Javascript :

console.log(document.getElementById('myInput').value);
console.log(document.getElementById('myInput').style.display);

Result in my computer is show nothing on my browser console.

My problem :

I need to know the parent of input type text style. cause if the parent style is none make the input type text show nothing when i try to get value of input type text. So the main question is how to get parent style WITHOUT add new id/class/name in div?

`.parentNode`? (Possibly recursively.) Or `.parent()`, with jQuery. You may want [`window.getComputedStyle()`](https://developer.mozilla.org/en/docs/Web/API/Window/getComputedStyle) rather than `.style`, too. — nnnnnn, Apr 21 '17 at 06:51
Can i get example with your solution for my case ? thank you — Mr. Mike, Apr 21 '17 at 06:53

score 1 · Answer 1 · answered Apr 21 '17 at 06:54

1

You can use parentElement to get the parent of the input & getComputedStyle to get the style of the parent element

var parentElem = document.getElementById('myInput').parentElement;
//getComputedStyle will give all the properties
console.log(window.getComputedStyle(parentElem, null).display)

DEMO

answered Apr 21 '17 at 06:54

brk

48,835
10
56
78

Is it able to handle if multi level child ? – Mr. Mike Apr 21 '17 at 06:57

score 1 · Accepted Answer · answered Apr 21 '17 at 06:56

1

You can use the .parentNode attribute with style in order to get the specific CSS properties you're looking for. All of them are listed on the object. The HTML would be:

  <div style="display: none">
    <div id='one'>
    </div>
  </div>

and the javascript would be:

var node = document.getElementById('one');

console.log(node.parentNode.style.display);

See the fiddle

answered Apr 21 '17 at 06:56

Garrett Kadillak

1,026
9
18

Is it able to handle if multi level child ? – Mr. Mike Apr 21 '17 at 06:59
Yes. You just keep chaining the `parentNode` attribute. – Garrett Kadillak Apr 21 '17 at 07:00

score 0 · Answer 3 · answered Apr 21 '17 at 06:57

Use .parent() with jQuery here is implemented

$('[type=text]').parent().css({'display':'block', 'background' : 'red','padding':'10px'});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display: none">
 <input type="text" id="myInput" value="5">
</div>

How to know parent / container style using Javascript?

3 Answers3