Home > Developer > JavaScript
getElementById
In JavaScript, what you have to say is to find the element and then manipulate it. getElementById (ID) is our first JS compatibility problem, is also a common method. There is a problem with using the ID directly under Firefox, and to solve this problem, you need to introduce document.getElementById (ID). document.getElementById can be used under any browser.
Case Study: Web page skinning
Html
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Skin Changing </title>
<link id= "L1" rel= "stylesheet" href= "Pink.css"/>
<body>
<input type= "button" value= "Skin 1" onclick= "Skinpink ()"/>
<input type= "button" value= "Skin 2" onclick= "Skingreen ()"/>
</body>Pink.css
Body{background:pink;}
input{width:200px; height:50px; background:green;}
Green.css
Body{background:green;}
input{width:200px; height:50px; background:pink;}
Js
function Skinpink () {
var oLi = document.getElementById (' L1 ');
Oli.href = "Pink.css";
}
function Skingreen () {
var oLi = document.getElementById (' L1 ');
Oli.href = "Green.css";
}
In the case of Web page skinning, we can draw a conclusion that:
-Any tag can be added with ID, including link;
-any attribute of any label can also be modified;
-HTML How to write, JS in how to write, but there is an exception, is the element class, the element class can not be written as an element. Class=xxx, should be the element. ClassName = xxx.
The first sentence of JavaScript--if judgment
Case: Click on the "More" button to display and hide Div
Implementation Principle Analysis:
When the user clicks, if the div is shown hidden = ODiv.style.display = ' None '
Or Div is hidden to show up = ODiv.style.display = ' block '
Basic syntax:
if (div is display) {
ODiv.style.display = ' None ';
}
else{
ODiv.style.display = ' block ';
}
Summary: A tentative study of the charms of JavaScript (1)
What is JS? JavaScript modifies the style or properties of a page based on the user's actions.
Events: There are onclick, onmouseover, onmouseout and so on.
Function: Writing code directly within an event can be messy. Functions are a core concept for any language. A function can encapsulate any number of statements, and it can be invoked at any time anywhere.
getElementById: One way to get an action object
If judgment: A statement commonly used in most programming languages
function Skinpink () {
var oLi = document.getElementById (' L1 ');
Oli.href = "Pink.css";
}
l2-on JavaScript charm (1)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
