Skip to content

Instantly share code, notes, and snippets.

View djD-REK's full-sized avatar
🌞
Full-Stack JavaScript Developer & Doctor of Physical Therapy 🌞

Dr. Derek Austin djD-REK

🌞
Full-Stack JavaScript Developer & Doctor of Physical Therapy 🌞
15 followers · 28 following
View GitHub Profile
@djD-REK
djD-REK / Replacing all inline CSS styles using JavaScript.js
Created June 12, 2020 21:17
// Replace the inline styles:
for (div of document.getElementsByTagName("div")) {
div.style.cssText = "font-size: 3rem"
}
// Clear out all inline styles:
for (div of document.getElementsByTagName("div")) {
div.style.cssText = ""
}
@djD-REK
djD-REK / One-liner for applying CSS to <div> elements with JavaScript.js
Created June 12, 2020 21:16
// As a one-liner:
for (div of document.getElementsByTagName("div")) {
div.style.fontSize = "3rem"
}
@djD-REK
djD-REK / Applying CSS styles to <div> elements using JavaScript.js
Created June 12, 2020 21:15
// Apply CSS styles to all of the selected <div> elements
for (div of allDivs) {
div.style.fontSize = "3rem"
}
@djD-REK
djD-REK / Selecting <div> elements with JavaScript.js
Last active June 12, 2020 21:14
// Select all the <div> elements on the current page
const allDivs = document.getElementsByTagName("div")
@djD-REK
djD-REK / Select all <div> elements using document.getElementsByTagName().js
Created June 11, 2020 20:12
// Select all <div> elements on the page
const divs = document.getElementsByTagName("div")
// Apply CSS styles to the selected <div> elements
for (div of divs) {
div.style.border = "3px solid orange"
}
// As a one-liner:
for (div of document.getElementsByTagName("div")) { div.style.border = "3px solid orange" }
@djD-REK
djD-REK / Using jQuery to select all <div> elements on a page.js
Created June 11, 2020 20:08
// Load jQuery, equivalent to having the <script> tag on the page
// <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
const loadScript = async (url) => {
const response = await fetch(url)
const script = await response.text()
eval(script) // or Function(script)
}
const scriptUrl = "https://code.jquery.com/jquery-3.5.0.js"
loadScript(scriptUrl)
@djD-REK
djD-REK / Loading jQuery with a <script> tag.js
Created June 11, 2020 03:32
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
@djD-REK
djD-REK / Load an external script using jQuery.js
Created June 11, 2020 03:30
$.getScript("script.js") // Load a script using jQuery
@djD-REK
djD-REK / Using Function() instead of eval() to load jQuery.js
Created June 11, 2020 03:30
// <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
const loadScript = async (url) => {
const response = await fetch(url)
const script = await response.text()
Function(script)
}
const scriptUrl = "https://code.jquery.com/jquery-3.5.0.js"
loadScript(scriptUrl)
@djD-REK
djD-REK / Use fetch() with a Promise chain to load jQuery.js
Created June 11, 2020 03:10
// <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
fetch("https://code.jquery.com/jquery-3.5.0.js")
.then((response) => response.text())
.then((text) => eval(text))
.then(() => {
/* Use jQuery */ $("div").css("border", "3px dotted orange")
})