-
-
Save emchateau/9fe3c1e14837e689b3a4a0d6edd49e80 to your computer and use it in GitHub Desktop.
JS Bin// source https://jsbin.com/tehijot
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="hasChild selector with JS"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| .color { | |
| color:red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button onclick="hasChild()">change color</button> | |
| <div id="title"> | |
| <h1>This is a h1 element.</span> | |
| </div> | |
| <div class="solo"> | |
| <span>This is a span element.</span> | |
| </div> | |
| <div class="solo"> | |
| <span class="span">This is a span we want red on click.</span> | |
| </div> | |
| <div class="group"> | |
| <span>This is a span element.</span> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| function hasChild() { | |
| var element = document.querySelectorAll('div.solo'); | |
| for (var i = 0; i < element.length; i++) { | |
| if (element[i].querySelectorAll('span.span').length > 0) { | |
| element[i].classList.add('color'); | |
| } | |
| } | |
| } | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">.color { | |
| color:red; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">function hasChild() { | |
| var element = document.querySelectorAll('div.solo'); | |
| for (var i = 0; i < element.length; i++) { | |
| if (element[i].querySelectorAll('span.span').length > 0) { | |
| element[i].classList.add('color'); | |
| } | |
| } | |
| }</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .color { | |
| color:red; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function hasChild() { | |
| var element = document.querySelectorAll('div.solo'); | |
| for (var i = 0; i < element.length; i++) { | |
| if (element[i].querySelectorAll('span.span').length > 0) { | |
| element[i].classList.add('color'); | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment