nezumi/javascript-training
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/javascript-training.git synced 2026-09-22 13:38:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Init DOM examples

Browse Source
This commit is contained in:
nezumi
2023-08-15 17:26:08 +07:00
parent f7f013c5e8
commit 3671d1fcfe
2 changed files with 87 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Sample/DOM/index.html
+46
View File
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Javascript Training</title>
</head>
<style>
body {
max-width: 600px;
margin: 0 auto;
font-family: sans-serif;
}
.active {
border: 2px solid blue;
}
.warning {
border: 2px solid red;
}
.hidden {
display: none;
}
.dashedBox {
border: 2px dashed lightgray;
padding: 15px;
margin: 5px;
}
</style>
<body>
<h1>DOM Training</h1>
<img
src="https://cdn.discordapp.com/attachments/1090895809098289185/1139820954860671106/IMG_0115.jpg"
/>
<div class="dashedBox">Div 1</div>
<div class="active dashedBox">Div 2</div>
<div class="myDiv">Div</div>
<script src="./index.js"></script>
</body>
</html>
Sample/DOM/index.js
+41
View File
@@ -0,0 +1,41 @@
const img = document.querySelector("img");
console.log(img.hasAttribute("src"));
console.log(img.getAttribute("src"));
img.removeAttribute("src");
img.setAttribute(
"src",
"https://cdn.discordapp.com/attachments/1090895809098289185/1140311522883670217/make_exp_1.jpg"
);
img.setAttribute("width", "711.2");
img.setAttribute("height", "400px");
// Select the first div
const div = document.querySelector("div");
// Assign the warning class to the first div
div.className = "warning";
// Select the second div by class name
const activeDiv = document.querySelector(".active");
activeDiv.classList.add("hidden"); // Add the hidden class
// activeDiv.classList.remove("hidden"); // Remove the hidden class
activeDiv.classList.toggle("hidden"); // Switch between hidden true and false
activeDiv.classList.replace("active", "warning"); // Replace active class with warning class
// Select div
const myDiv = document.querySelector(".myDiv");
console.log(myDiv);
// Apply style to div
myDiv.setAttribute("style", "text-align: center");
myDiv.style.height = "200px";
myDiv.style.width = "500px";
myDiv.style.border = "2px solid black";
myDiv.style.borderRadius = "50%";
myDiv.style.display = "flex";
myDiv.style.justifyContent = "center";
myDiv.style.alignItems = "center";