JQuery learning Journey (1) – Basics
**getElementById(id); Get the element object.style with the specified ID as a property via object object.style.property = XXX; Object. className= xx; Change the style of the object
Use object.reamoveAttribute(” style “) to reset the style of an object.
支那
<! PUBLIC DOCTYPE HTML "- / / / / W3C DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd" > < HTML > < head > < meta http-equiv="Content-Type" content="text/html; Charset = utf-8 "> < script type =" text/javascript "SRC =" http://libs.baidu.com/jquery/1.9.1/jquery.js "> < / script > <title>document.getElementById</title> <style type="text/css"> input{ font-size:10px; } .one{ border:1px solid #eee; width:230px; height:50px; background:#ccc; color:red; }.two{ border:1px solid #ccc; width:230px; height:50px; background:#9CF; color:blue; } </style> </head> <body> <h2 id="con">JavaScript course </ h2 > <div ID =" TXT "> <h5>JavaScript adds dynamic effects to web pages and implements user interaction functions. </h5> <p>1. JavaScript entry, so that you do not understand JS, quickly understand JS. </p> <p>2. JavaScript advanced, let you master the basic SYNTAX of JS, functions, arrays, events, built-in objects, BOM browser, DOM operations. </p> <p>3. After learning the above two basic courses, I will further study JavaScript variable scope, events, objects, motion, cookies, regular expressions, Ajax and other courses. </p> </div> <form> <input type="button" value=" changeColor "onclick="changeColor()"/> <input type="button" value=" change width" Onclick ="changeHeightAndWidth()"/> <input type="button" value=" hidden content "/> <input type="button" /> <input type="button" value=" cancel()"/> <input type="button" value=" add style" Onclick ="add()"/> <input type="button" value=" change "/> </form> <script type="text/javascript"> function changeColor() { var my = document.getElementById("con"); my.style.color = "#fff"; my.style.backgroundColor = "#CCC"; } function changeHeightAndWidth() { var my = document.getElementById("con"); my.style.height="100px"; my.style.width="200px"; } function show() { var my = document.getElementById("con"); my.style.display="block"; } function hide() { var my = document.getElementById("con"); my.style.display="none"; } function cancel() {var conf = confirm(); ) if(conf == true){ var my = document.getElementById("con"); // Remove the style my.removeAttribute("style"); my.className=null; } } function add() { var my = document.getElementById("con"); my.className = "one"; } function change() { var my = document.getElementById("con"); my.className = "two"; } </script> </body> </html>Copy the code