How to Get DOM objects in JS _ uniform style of simple webpage text editing

In the previous article, JavaScript controls the text style methods in several ways. Adjust and adjust the final success effect. Let's take a look at it first:

Obviously, text is stored in two areas: display area and editing area.

The display area control style is relatively simple, because it is a textarea. At this time, you can use the document. getelementbyid ('msgbox') method.

The editing area is troublesome because each chat record is a page element and the <span> label is used. The document. getelementsbyname method cannot be used because no name attribute exists;

After checking, there is a class attribute. Simply call the document. getelementsbyclassname method. This time the object is obtained, but the evil IE does not recognize it. Chrome and Firefox can. There are ie-compatible methods on the Internet, with too much code.

Finally, select the application <div> label and use the name attribute to unify the style of the upper and lower areas. The source code is as follows:

// DML @ WIP 2012.8.17 put msgfunction putmsghtml (MSG) {var msghtml = ''; var body = ''; // dml@2012.8.17 arrange the place for the key datamsghtml + = "<Div Title = \" @ "+ mtime +" \ "cdate = \" "+ now. gettime () + "\" dir = \ "" + dir + "\" Body = \ "" + htmlenc (body) + "\"> "; body = msgformat (body); If (ERR) {msghtml + = "<span style = 'color: red; '>";} else if (body. match (/^ \/ME/) {body = body. replace (/^ \/ME/, "<span style = \" color: green; font-weight: bold; \ "class = msgnick> *" + Nick + "</span>");} else {msghtml + = "<span style = \" color: "+ nickcolor + "; \ "class = msgnick>" + Nick + "</span> ";} msghtml + = "<SPAN class = Time> [" + mtime + "] </span>"; // dynamic change name: chatarea color & font dml@2012.8.14msgHTML + = "<Div name = \" chatarea \ ">" + body + "</span>"; if (ERR) msghtml + = '</span>'; msghtml + = "</div>"; var auto_scroll = false; If (cframe. body. scrolltop + cframe. body. clientheight> = cframe. body. scrollheight) // scrollbar // At // bottomauto_scroll = true; cframe. body. innerhtml + = msghtml; // alert (msghtml); this. changemsgboxstyle (); If (auto_scroll) chat. scrollto (0, cframe. body. scrollheight);} // Let the textarea ['msgbox']'s style be same as chatarea DML @ 2012.8.22function changemsgboxstyle () {This. myfont (); this. myfontcolor (); this. myfontsize (); var chatarea = frames ["chat" cmd.doc ument. getelementsbyname ('chatare'); For (VAR I = 0; I <chatarea. length; I ++) {chatarea [I]. style. fontstyle = document. getelementbyid ('msgbox '). style. fontstyle;} For (VAR I = 0; I <chatarea. length; I ++) {chatarea [I]. style. fontweight = document. getelementbyid ('msgbox '). style. fontweight;} For (VAR I = 0; I <chatarea. length; I ++) {chatarea [I]. style. textdecoration = document. getelementbyid ('msgbox '). style. textdecoration ;}} function myfont () {document. getelementbyid ('msgbox '). style. fontfamily = chatform. font. value; var chatarea = frames ["chat" comment .doc ument. getelementsbyname ('chatare'); For (VAR I = 0; I <chatarea. length; I ++) {chatarea [I]. style. fontfamily = chatform. font. value ;}} function myfontcolor () {document. getelementbyid ('msgbox '). style. color = chatform. fontcolor. value; var chatarea = frames ["chat" comment .doc ument. getelementsbyname ('chatare'); For (VAR I = 0; I <chatarea. length; I ++) {chatarea [I]. style. color = chatform. fontcolor. value ;}} function myfontsize () {document. getelementbyid ('msgbox '). style. fontsize = chatform. fontsize. value; var chatarea = frames ["chat" comment .doc ument. getelementsbyname ('chatare'); For (VAR I = 0; I <chatarea. length; I ++) {chatarea [I]. style. fontsize = chatform. fontsize. value ;}// italic function italic () {If (document. getelementbyid ('msgbox '). style. fontstyle = "italic") document. getelementbyid ('msgbox '). style. fontstyle = "normal"; elsedocument. getelementbyid ('msgbox '). style. fontstyle = "italic"; var chatarea = frames ["chat" developer.doc ument. getelementsbyname ('chatare'); For (VAR I = 0; I <chatarea. length; I ++) {If (chatarea [I]. style. fontstyle = "italic") chatarea [I]. style. fontstyle = "normal"; elsechatarea [I]. style. fontstyle = "italic" ;}} function bold () {If (document. getelementbyid ('msgbox '). style. fontweight = "bold") document. getelementbyid ('msgbox '). style. fontweight = "normal"; elsedocument. getelementbyid ('msgbox '). style. fontweight = "bold"; var chatarea = frames ["chat" developer.doc ument. getelementsbyname ('chatare'); For (VAR I = 0; I <chatarea. length; I ++) {If (chatarea [I]. style. fontweight = "bold") chatarea [I]. style. fontweight = "normal"; elsechatarea [I]. style. fontweight = "bold" ;}} function underline () {If (document. getelementbyid ('msgbox '). style. textdecoration = "underline") document. getelementbyid ('msgbox '). style. textdecoration = "NONE"; elsedocument. getelementbyid ('msgbox '). style. textdecoration = "underline"; var chatarea = frames ["chat" ).doc ument. getelementsbyname ('chatare'); For (VAR I = 0; I <chatarea. length; I ++) {If (chatarea [I]. style. textdecoration = "underline") chatarea [I]. style. textdecoration = "NONE"; elsechatarea [I]. style. textdecoration = "underline ";}}

When processing text styles, the <div> label is similar to the <span> label. The difference is an equation <Div >=< br> <span>.

Code efficiency needs to be improved, and reconstruction is required.