HTML DOM getElementId() method.
what is the getElementById() method?
1] getElementById() method is returen the element .
2] getElementById() method is returns unique function.
3] getElementById() method is commen method is html document object mode.
4] getElementById() method is case-sensitive string and unique document.
5] getElementById() method is built-in method of (DOM).
6] getElementById() method is quickly access element in html.
7] getElementById() method is quickly modify and quickly access element in webpage.
Syntax :-
'document.getElementById( Id)'
- Element ById() is parameter used an hold the ID of Element.
- single function accept.
- id is part of document object model(DOM)API.
- which provide to interact with content of web pages.
Q 1] . change style color properti use document.getElementById().
Example :-
<html>
<head>
<title>Example Number 3</title>
<style>
#heading {
color: rgb(255, 81, 0);
font-size: 18px;
}
button{
font-size:30px;
}
</style>
</head>
<body style="background-color:rgb
(191, 191, 229);">
<h1 id="main-heading"
style="text-align: center;">Javascript
<br>learn programming language</h1>
<h2 style="text-align: center;">
<br>DOM getElementById()method</h2>
<button onclick="changeStyle()" >
Change heading Style color</button>
<script>
function changeStyle() {
var element = document.
getElementById("main-heading");
element.style.color = "blue";
}
</script>
</body>
</html>
Output :-
Q.2] input text square example use document.getElementById().
Example:-
<html>
<head>
<title> Dom getElementById() method
</title>
</head>
<script type="text/javascript">
function getsquare()
{
var number=document.
getElementById("number").value;
alert(number*number);
}
</script><br><br>
<form>
<h2> Dom getElementById() method</h2>
<h3>Enter No</h3>
<input type="text" id="number"
name="number"><br><br>
<input type="button"
style="font-size:30; color:white;
background-color:blue;" value="square"
onclick="getsquare()">
</form>
</html>
Output :-
Q.3] change word properti use document.getElementById().
Example:-
<html>
<head>
<title>DOM</title>
<style>
button{
font-size:30px;
color: blue;
}
</style>
</head>
<body style="background-color:
rgb(253, 134, 241);">
<h1 id="heading">learn programming language
</h1>
<h2 style="text-align: center;"><br>
DOM getElementById()</h2><br>
<button onclick="alterText()">Change text
</button>
<script>
function alterText()
{
var output = document.getElementById
("heading");
output.innerHTML
="learn programming language in<br> JavaScript
function";
}
</script>
</body>
</html>
Output:-
Related Post :-
Comments
Post a Comment