revision:
<div>
<p>anchors: find the elements using document anchors.</p>
<a name="html">HTML tutorial</a><br>
<a name="css">CSS tutorial</a><br>
<a name="xml">XML tutorial</a><br>
<p style="margin-left: 5vw;" id="demo"></p>
</div>
<script>
document.getElementById("demo").innerHTML = "Number of anchors is: " + document.anchors.length;
</script>
anchors: display the innerHTML of the first anchor in the document.
<div>
<p>anchors: display the innerHTML of the first anchor in the document.</p>
<button style="margin-left: 5vw;" onclick="myFunction()">try it</button>
<p style="margin-left: 5vw;" id="demo1"></p>
</div>
<script>
function myFunction() {
document.getElementById("demo1").innerHTML = document.anchors[0].innerHTML;}
</script>
This is a text. This is a text. This is a text.
<div>
<p style="margin-left: 5vw;" id="p1">
This is a text.
This is a text.
This is a text.
</p>
<input style="margin-left: 5vw;" type="button" value="hide text"
onclick="document.getElementById('p1').
style.visibility='hidden'">
<input style="margin-left: 5vw;" type="button" value="Show text"
onclick="document.getElementById('p1').
style.visibility='visible'">
</div>
move mouse over the squares!
<div>
<p style="margin-left:5vw;">move mouse over the squares!</p>
<table style="width:30vw;height:10vw; margin-left:5vw;">
<tr>
<td onmouseover="bgChange(this.style.backgroundColor)" onmouseout="bgChange('transparent')"
style="background-color:Khaki"></td>
<td onmouseover="bgChange(this.style.backgroundColor)" onmouseout="bgChange('transparent')"
style="background-color:PaleGreen"></td>
<td onmouseover="bgChange(this.style.backgroundColor)" onmouseout="bgChange('transparent')"
style="background-color:Silver"></td>
</tr>
</table>
</div>
<script>
function bgChange(bg) {
document.body.style.background = bg;
}
</script>
<form style="margin-left:5vw;">
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
<br><br>
<input type="button" onclick="disable()" value="disable list">
<input type="button" onclick="enable()" value="enable list">
</form>
<script>
function disable() {
document.getElementById("mySelect").disabled=true;
}
function enable() {
document.getElementById("mySelect").disabled=false;
}
</script>
<form style="margin-left:5vw;">
Select your favorite fruit:
<select id="mySelect_a">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
<br><br>
<input type="button" onclick="getOptions()" value="Output all options">
</form>
<p style="margin-left:5vw;" id="option"></p>
<script>
function getOptions() {
var x = document.getElementById("mySelect_a");
var txt = "";
var i;
for (i = 0; i < x.length; i++) {
txt = txt + " , " + x.options[i].text;
}
document.getElementById("option").innerHTML = txt;
}
</script>
When you leave the input field, a function is triggered which transforms the input text to upper case.
<div>
<a>Enter your name:<input type="text" id="fname" onblur="transform()"></a>
</div>
<script>
function transform() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
<form style="margin-left:1vw;">
Choose which browser you prefer:
<select id="browsers" onchange="preferedBrowser()">
<option value="Chrome">Chrome</option>
<option value="Internet Explorer">Internet Explorer</option>
<option value="Firefox">Firefox</option>
</select>
</form>
<script>
function preferedBrowser() {
prefer = document.forms[2].browsers.value;
alert("You prefer browsing internet with " + prefer);
}
</script>
Click the "try it" button to rotate the DIV element:
<style>
#myDIV {margin: auto; border: 1px solid black; width: 20vw; height: 10vw;
background-color: coral; color: white;}
</style>
<div>
<p>Click the "try it" button to rotate the DIV element:</p>
<button onclick="rotation()">try it</button>
<div id="myDIV"><h3>first example</h3></div>
</div>
<script>
function rotation() {
// Code for IE9
document.getElementById("myDIV").style.msTransform = "rotate(30deg)";
// Standard syntax
document.getElementById("myDIV").style.transform = "rotate(30deg)";
}
</script>
<style>
.box {background: lightcoral; width: 20vw; height: 10vw; margin: 2vw auto;}
</style>
<div>
<button onclick="add()" class="btn">transform</button>
<div class="box">second example</div>
</div>
<script>
function add() {
document.querySelector('.box').style.transform = "translate(10px,10px) rotate(-20deg)";
}
</script>
<style>
#example-element {margin: 5vw; width: 10vw; height: 10vw; transform-style: preserve-3d; transform: rotate3d(1, 1, 1, 30deg);}
.face {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute;
backface-visibility: inherit; font-size: 6vw; color: #fff;}
.front {background: rgba(90,90,90,.7); transform: translateZ(5vw);}
.back {background: rgba(0,210,0,.7); transform: rotateY(180deg) translateZ(5vw);}
.right {background: rgba(210,0,0,.7); transform: rotateY(90deg) translateZ(5vw);}
.left {background: rgba(0,0,210,.7);transform: rotateY(-90deg) translateZ(5vw);}
.top {background: rgba(210,210,0,.7); transform: rotateX(90deg) translateZ(5vw);}
.bottom {background: rgba(210,0,210,.7); transform: rotateX(-90deg) translateZ(5vw);
</style>
<div>
<section id="example-element">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</section>
<div class="checkbox">
<label for="preserve"><code>preserve-3d</code></label>
<input type="checkbox" id="preserve" checked>
</div>
</div>
<script>
const cube = document.getElementById('example-element');
const checkbox = document.getElementById('preserve');
checkbox.addEventListener('change', () => {
if(checkbox.checked) {
cube.style.transformStyle = 'preserve-3d';
} else {
cube.style.transformStyle = 'flat';
}
})
</script>
This is an example paragraph.
<div>
<p id="text1">This is an example paragraph.</p>
<button type="button" onclick="change()">transform</button>
</div>
<script>
function change() {
document.getElementById("text1").style.textTransform = "capitalize";
}
</script>
This is another example paragraph.
<div>
<p id="text2">This is another example paragraph.</p>
<button type="button" onclick="changeFunction()">Transform</button>
</div>
<script>
function changeFunction() {
document.getElementById("text2").style.textTransform = "uppercase";
}
</script>
Click the button to add a color to the p element.
p element: How to change the style of a text
<div>
<button onclick="coloring()">try it</button>
<p>Click the button to add a color to the p element.</p>
<p id="myP"> p element: How to change the style of a text</p>
</div>
<script>
function coloring() {
document.getElementById("myP").style.color = "red";
}
</script>
Click the button to get the value of the top border.
<div>
<p id="myP1" style="border-top: 5px solid red;">Click the button to get the value
of the top border.</p>
<button onclick="myValue()">click</button>
<p id="demoP"></p>
</div>
<script>
function myValue() {
var x = document.getElementById("myP1").style.borderTop;
document.getElementById("demoP").innerHTML = x;
}
</script>
click the button to set the value of the alignContent property to "space-between".
<style>
#main {width: 14vw; height: 30vw; border: 1px solid #000000; display: flex; flex-flow:
row wrap; align-content: space-around;}
#main div {width: 7vw; height: 7vw;}
</style>
<div>
<p>click the button to set the value of the alignContent property to "space-between".</p>
<button onclick="align()">try it</button>
<div style="margin-left:5vw;" id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:khaki;"></div>
<div style="background-color:pink;"></div>
<div style="background-color:lightgrey;"></div>
<div style="background-color:lightgreen;"></div>
</div>
</div>
<script>
function align() {
document.getElementById("main").style.alignContent = "space-between";
}
</script>
click the button to set the value of the alignItems property to "flex-start"
<style>
#main1 {width: 22vw; height: 10vw; border: 1px solid black; display: flex; align-items: center;}
#main1 div {flex: 1;}
</style>
<div>
<p>click the button to set the value of the alignItems property to "flex-start"</p>
<button onclick="check()">try it</button>
<div style="margin-left:5vw;" id="main1">
<div style="background-color:coral;">RED</div>
<div style="background-color:lightblue;">BLUE</div>
<div style="background-color:lightgreen;">Green div with more content.</div>
</div>
</div>
<script>
function check() {
document.getElementById("main1").style.alignItems = "flex-start";
}
</script>
click the button to set the value of the alignSelf property to "stretch"
<style>
#main2 {width: 22vw; height: 10vw; border: 1px solid black; display: flex; align-items:
flex-start;}
#main2 div {flex: 1;}
#myBlueDiv {align-self: center;}
</style>
<div>
<p>click the button to set the value of the alignSelf property to "stretch"</p>
<button onclick="alignFunction()">try it</button>
<div style="margin-left:5vw;" id="main2">
<div style="background-color:coral;">RED</div>
<div style="background-color:lightblue;" id="myBlueDiv">BLUE</div>
<div style="background-color:lightgreen;">Green div with more content.</div>
</div>
</div>
<script>
function alignFunction() {
document.getElementById("myBlueDiv").style.alignSelf = "stretch";
}
</script>
Let text flow from right to left
This is an example paragraph.
<div>
<p>Let text flow from right to left</p>
<button type="button" onclick="direction()">try it</button>
<p id="demoA">This is an example paragraph.</p>
</div>
<script>
function direction() {
document.getElementById("demoA").style.direction = "rtl";
}
</script>
Click the "try it" button to change the background property of the DIV element:
The DIV element
<style>
#DIV2 {width: 30vw; height: 30vw; background: coral url('smiley.gif') no-repeat
fixed center; color: white;}
</style>
<div>
<p>Click the "try it" button to change the background property of the DIV element:</p>
<button onclick="chBg()">try it</button>
<div id="DIV2"><p>The DIV element</p></div>
</div>
<script>
function chBg() {
document.getElementById("DIV2").style.background = "url('smiley.png') repeat-x
brown center";
}
</script>
Click the "try it" button to change the color of the underline.
Hello world!
<div>
<p>Click the "try it" button to change the color of the underline.</p>
<button onclick="changeColor()">try it</button>
<p style="text-decoration:underline;" id="demoAA">Hello world!</p>
</div>
<script>
function changeColor() {
document.getElementById("demoAA").style.textDecorationColor = "red";
}
</script>
Mouse over the DIV element and it will change, gradually, both in color and size!
Click the "try it" button and mouse over the DIV element again. The changes will still happen, but only the width and height will change gradually.
<style>
#DIV3{border: 1px solid black; background-color: lightblue; width: 27vw; height: 20vw;
overflow: auto; transition: all 2s;}
#DIV3:hover {background-color: coral; width: 37vw; height: 40vw; padding: 10vw;
border-radius: 5vw;}
</style>
<div>
<p>Mouse over the DIV element and it will change, gradually, both in color and
size!</p>
<p>Click the "try it" button and mouse over the DIV element again. The changes
will still happen, but only the width
and height will change gradually.</p>
<button onclick="transition()">try it</button>
<div id="DIV3"><h1> A DIV</h1></div>
</div>
<script>
function transition() {
document.getElementById("DIV3").style.transitionProperty = "width, height";
}
</script>