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() rather than .style, too. — nnnnnn
– nnnnnn, Commented Apr 21, 2017 at 6:51
Can i get example with your solution for my case ? thank you — Mr. Mike
– Mr. Mike, Commented Apr 21, 2017 at 6:53

Garrett Kadillak · Accepted Answer · 2017-04-21 06:56:07Z

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, 2017 at 6:56

Garrett Kadillak

1,08010 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mr. Mike Over a year ago

Is it able to handle if multi level child ?

Garrett Kadillak Over a year ago

Yes. You just keep chaining the parentNode attribute.

brk · Accepted Answer · 2017-04-21 06:54:01Z

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, 2017 at 6:54

brk

50.3k10 gold badges59 silver badges85 bronze badges

1 Comment

Mr. Mike Over a year ago

Is it able to handle if multi level child ?

Awadhesh verma · Accepted Answer · 2017-04-21 06:57:57Z

0

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>

answered Apr 21, 2017 at 6:57

Awadhesh verma

5404 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to know parent / container style using Javascript?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related