getElementById
1.getElementById is a method or function of the document object.
2.getElementById can be accessed by using document.getElementById.
Syntax
document.getElementById(id name).style.property = new style
Example: 1
<html>
<head>
<script type="text/javascript">
</head>
<body>
</body>
</html>
<head>
<script type="text/javascript">
function changeText()
{
document.getElementById("test").style.color="red";
}
</script>{
document.getElementById("test").style.color="red";
}
</head>
<body>
<div id="test">
I will change color, if you click "Change the text".
</div>
<button onclick="changeText();">Change the text</button>I will change color, if you click "Change the text".
</div>
</body>
</html>
Output
I will change color, if you click "Change the text".
Example: 2
<html>
<head>
<script type="text/javascript">
</head>
<body>
</html>
<head>
<script type="text/javascript">
function visible()
{
document.getElementById("test").style.visibility='visible';
}
function invisible()
{
document.getElementById("test").style.visibility='hidden';
}
</script>{
document.getElementById("test").style.visibility='visible';
}
function invisible()
{
document.getElementById("test").style.visibility='hidden';
}
</head>
<body>
<div id="test">
I will disappear, if you click Change the text.
</div>
<button onclick="visible();">Click me to show</button>
<button onclick="invisible();">Click me to hidden</button>
</body>I will disappear, if you click Change the text.
</div>
<button onclick="visible();">Click me to show</button>
<button onclick="invisible();">Click me to hidden</button>
</html>
Output
I will disappear, if you click Change the text.
No comments:
Post a Comment