Hello…. Visitors… Welcome Again at my page in “We Are
Knowledge”. Now I want next of tutorial javascript about “DinamicH HTML”.
I want tutorial you about :
A. Acces and Manipulation Object HTML
B. Manipulation Style or CSS Object HTML
Ok. Let’s check it now.. have fun reading…
A. Acces and Manipulation Object HTML
For acces object HTML, we can using tools was present by
javascript
Sintaks:
Document.getElementById(“id_object”)
Or we can too using this
Sintaks:
Document.getElementByName(“name_object”)
In sintaks of javascript “capital letter” and “lower case
letter” sensitive..
Example 1:
<html>
<head>We Are
Knowledge<br>
<title>Tutorial
Javascript - Array</title>
</head>
<script type =
"text/javascript">
function getElement()
{
var
a =
document.getElementById("b")
alert("This Is
Element " + a.tagName)
}
</script>
</head>
<body>
<h2
id="b" onclick="getElement()">
Click This For Showing
My Name Font Taq</h2>
</body>
</html>
To result :
Click This For Showing My Name Font Taq
Note :
If you click “Click This For Showing My Name Font Taq” want to appear alert “This Is Element H2”
InnerHTML
- Method for manipulation Object HTML
- For getting fill of text or HTML a object or HTML taq
Example 2:
<html>
<head>We Are
Knowledge<br>
<title>Tutorial
Javascript - Array</title>
</head>
<script type =
"text/javascript">
function a()
{
a =
document.getElementById("head").innerHTML;
alert("fill")
}
function b()
{
document.getElementById("head").innerHTML=
"This Text Was Change";
}
</script>
</head>
<body>
<h2
id="head">Welcome User In My Page</h2>
<input
type="button" onclick="a()" value="Look fill
H2">
<input
type="button" onclick="b()" value="Change fill
H2">
</body>
</html>
To result :
If you click button “look fill H2” to appear “alert : fill”
If you click button “Change fill H2” text “Welcome User In
My Page” became “This Text Was Change”
B. Manipulation Style or CSS Object HTML
Sintaks:
objectHTML.style.nameStyle = “set of style”
objectHTML.nameStyle = “set of Style”
or
document.getElementById(“nameid”).style.nameStyle = “set of
style”
document.getElementById(“nameid”) nameStyle = “set of style”
example 3:
1. Change background color Table
<html>
<head>We Are
Knowledge<br>
<title>Tutorial
Javascript - Array</title>
</head>
<body>
<table border =
"2" width ="400" bgcolor="green">
<tr>
<td
onmouseover="this.bgColor='yellow'"
onmouseout="this.bgColor='gray'">W-A-K</td>
</tr>
<tr>
<td
onmouseover="this.bgColor='yellow'" onmouseout="this.bgColor='gray'">H-F-A-E</td>
</tr>
</body>
</html>
2. Change background color
<html>
<head>We Are
Knowledge<br>
<title>Tutorial
Javascript - Array</title>
<script>
function a()
{
document.bgColor =
"pink";
}
</script>
</head>
<body>
<input
type="button" onClick="a()" value="change">
</body>
</html>
No comments:
Post a Comment