JavaScript insert style implementation code_javascript skills-JS Tutorial-php.cn

JavaScript insertion styles are widely used in front-end development, especially when modifying front-end performance and page skinning. The task I did recently was that when a user clicks a button on someone else's site, a script will be inserted and executed under the page of the other site. This includes the insertion of styles.

Generally, there are two types of JavaScript dynamic insertion styles. One is to introduce external styles into the page, using the tag in to introduce an external style file, and the other is to introduce an external style file into the page. Use the tag to insert page styles (this is not the style attribute). 1. Introduce external styles into the page: Use the tag in to introduce an external style file. This is relatively simple and is not compatible with all mainstream browsers. Sexual issues:

Copy code The code is as follows: function includeLinkStyle(url) { var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = url; document. getElementsByTagName("head")[0].appendChild(link); } includeLinkStyle("http://css.jb51.net/home/css/reset.css?v=20101227"); However, in the project I am currently working on, there are very few applied styles. It seems inappropriate to directly introduce an external style file, so I chose the second option, using tag inserts a page style. 2. Use the tag to insert the page style: This method has compatibility issues in various mainstream browsers. Standard browsers such as Firefox cannot directly obtain the cssText that sets styleSheet. value, under standard browsers only document.styleSheets[0].cssRules[0].cssText can be used to obtain the style individually; at the same time, use: document.styleSheets[0].cssRules[0].cssText=newcssText; the page will not be automatically updated. For styles, you must use: document.styleSheets[0].cssRules[0].style.cssText=newcssText; this seems not as user-friendly and simple as the cheating IE. A good method is used in YUI: style.appendChild(document.createTextNode(styles)); Use createTextNode to add the style string to the tag; Copy code The code is as follows: function includeStyleElement(styles,styleId) { if (document.getElementById(styleId)) { return } var style = document.createElement("style"); style.id = styleId; //It is best to set the following attributes for ie here /*if (isIE ()) { style.type = "text/css"; style.media = "screen" }*/ (document.getElementsByTagName("head")[0] || document.body).appendChild(style); if (style.styleSheet) { //for ie style.styleSheet.cssText = styles; } else {//for w3c style. appendChild(document.createTextNode(styles)); } } var styles = "#div{background-color: #FF3300; color:#FFFFFF }"; includeStyleElement(styles," newstyle"); In this way, the styles can be applied directly to the elements on the page, regardless of whether these elements of yours are appended through scripts. About hand cheapness: Look at this code: Copy the code The code is as follows: var divObj = document.createElement("div"); divObj .id = "__div"; divObj .innerHTML="Test js to insert DOM and style"; document.body.appendChild (divObj ); var styles = "#__div{background-color: #FF3300; color:#FFFFFF }"; includeStyleElement(styles,"newstyle"); front As mentioned in this project, when a user clicks a button on someone else's site, a script will be inserted and executed under the page of the other site. This includes the insertion of styles. In order to ensure the uniqueness of the element ID I created as much as possible , Hand added "__" before the element ID to indicate privateness to prevent conflicts. The result is tragic. The names of IE6 and IE7 class and id cannot start with an underscore ("_"). I actually forgot this! It took two hours to find the reason. What a tragedy! Come to a conclusion!