Created
December 4, 2019 00:11
-
-
Save Draketheb4dass/eba328df0c031e68df4d4fdca82236c2 to your computer and use it in GitHub Desktop.
Dom manipulation styling element
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 charset="utf-8"> | |
<title>Changing styles</title> | |
<style> | |
p .animal { | |
color: red; | |
} | |
a[href*="Dog"] { | |
color: purple; | |
} | |
#heading { | |
} | |
</style> | |
</head> | |
<body> | |
<h1 id="heading">All about dogs</h1> | |
<p>The domestic <span class="animal">dog</span> is known as man's best friend. The <span class="animal">dog</span> was the first domesticated animal and has been widely kept as a working, hunting, and pet companion. According to recent coarse estimates, there are currently between 700 million and one billion <span class="animal">dog</span>s, making them the most abundant predators in the world. <a href="http://en.wikipedia.org/wiki/Dog">Read more on Wikipedia</a>.</p> | |
<img src="https://www.kasandbox.org/programming-images/animals/dog_sleeping-puppy.png" height="150"> | |
<img src="https://www.kasandbox.org/programming-images/animals/dogs_collies.png" height="150"> | |
<script> | |
var imageEls = document.getElementsByTagName("img"); | |
for (var i = 0; i < imageEls.length; i++) { | |
imageEls[i].src = "https://www.kasandbox.org/programming-images/animals/cat.png"; | |
} | |
var linkEls = document.querySelectorAll("a[href*=\"Dog\"]"); | |
for (var i = 0; i < linkEls.length; i++) { | |
linkEls[i].href = "http://en.wikipedia.org/wiki/Cat"; | |
} | |
var headingEl = document.querySelector("#heading"); | |
headingEl.style.color = "blue"; | |
headingEl.style.backgroundColor = "gray"; | |
headingEl.style.textAlign = "center"; | |
headingEl.innerHTML = "All about cats"; | |
var nameEls = document.querySelectorAll("p .animal"); | |
for (var i = 0; i < nameEls.length; i++) { | |
nameEls[i].innerHTML = "cat"; | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment