Home > Developer > JavaScript
Object-oriented Writing simple small example, also is a small template, convenient for later reference, if wrong, please the great God more guidance.
Thought: To add color and add content to #box, one way is to add a color, and the other is to add content and then write an object-oriented notation.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title></title></Head><style>#box{width:100px;Height:100px;background:Orange;}</style><Body> <DivID= "box"></Div></Body></HTML><Script> //constructor Function functionMybox (options) {//at the moment Option.box is referring to box:document.getElementById (' box ') This. Box=Options.box; //Each method is best to write separately //ways to switch colors This. Boxcolor (); //Add content to box This. Addspan (); } //ways to write colorsMyBox.prototype.boxColor= function() { //then it is possible to inherit the This.box property here . varMybox= This. Box; //creating a span here is just a demonstration, so we can also access the This.span in Addspan This. Span=Document.createelement ('span'); varBoxblue= function() {MyBox.style.background= 'Blue'; } //Monitoring EventsBox.addeventlistener ('Click', Boxblue); } //ways to add a spanMyBox.prototype.addSpan= function() { varMybox= This. Box; //the inherited This.span can be brought here. varspan= This. span; Span.innerhtml= 'please teach the great god'; Mybox.appendchild (span); } //new object, and then the argument is an object; NewMybox ({box:document.getElementById ('Box') });</Script>
JavaScript is a simple and small example of object-oriented writing, for future reference
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
