How to modify and replace style sheets in Javascript

Source: Internet
Author: User

Recently, a student asked me about the convenience of JS. The following article is taken from the Internet.

 Use JavaScript to modify webpage styles
I,Partial style change
You can change the direct style, classname, and csstext. Note that:
Case Sensitive:
Javascript is case sensitive. classname cannot write "N" as "N", and csstext cannot write "T" as "T". Otherwise, the effect cannot be achieved.
Call Method:
If you change the classname, declare the class in the style sheet in advance, but do not declare the class with the style, such as document. getelementbyid ('obj '). style. classname = "... the statement is incorrect! Can only be written as: Document. getelementbyid ('obj '). classname = "..."
Change csstext
However, if csstext is used, style must be added. The correct syntax is: document.getelementbyid('obj').style.css text = "..."

I don't have to talk about changing the direct style. You just need to write it into the specific style, as shown in
Document. getelementbyid ('obj '). style. backgroundcolor = "#003366"

II,Global style change
In general, we can change the value of href of the external link style to implement real-time switching of the webpage style, that is, "changing the template style ". At this time, we first need to assign an ID to the target to be changed, as shown in figure

<LINK rel = "stylesheet" type = "text/CSS" id = "CSS" href = "firefox.css"/>

It is easy to call, such

<Span on click = "javascript: Document. getelementbyid ('css '). href = 'ie.css'"> click here to change the style </span>

New users often do not know how to write CSS styles in Javascript, and sometimes the requirements are different in different browsers. For example, float is written as stylefloat in IE and cssfloat in Firefox, which requires your accumulation. Searching for "ccvita JavaScript" in Google may be helpful to your doubts.

 

Iii. Regular Expressions

G indicates global match.
M indicates that multiple rows can be matched.
I indicates case-insensitive matching.
^ Match the start position of the input string
$ Match the end position of the input string
* Match the previous subexpression zero or multiple times. equivalent to {0 ,}
+ Match the previous subexpression once or multiple times. equivalent to {1 ,}
? Matches the previous subexpression zero or one time. It is equivalent to [}. When this character follows any other delimiter (*, + ,?, The matching mode after {n}, {n ,}, {n, m}) is not greedy. The non-Greedy mode matches as few searched strings as possible, while the default greedy mode matches as many searched strings as possible. For example, for strings "oooo", 'O ++? 'Will match a single "O", and 'O +' will match all 'O '.

\ D matches a numeric character. It is equivalent to [0-9]
\ D matches a non-digit character. It is equivalent to [^ 0-9]
\ W, equivalent to "[A-Za-z0-9 _]"
\ W matches any non-word character, equivalent to "[^ A-Za-z0-9]"
\ S matches any blank characters, including space tabs, and so on. It is equivalent to [\ f \ n \ r \ t \ v]
\ S matches any non-blank characters. It is equivalent to [^ \ f \ r \ n \ t \ v]
\ B matches a word boundary, that is, the position between a word and a space.
\ B matches non-word boundaries.

 

Common JS methods for regular expressions:

/** <Br/> * search for required substrings in the source string. <br/> * @ return {}< br/> */<br/> function matchdemo () {<br/> var R, RE; // declare the variable. <Br/> var S = "The rain in Spain falls mainly in the plain"; <br/> Re = new Regexp ("Ain", "G "); // create a regular expression object. <Br/> r = S. Match (re); // search for matching in string S. <Br/> return (R ); <br/>}</P> <p>/** <br/> * returns all strings and positions that match the regular expression in the source string. <br/> */<br/> function regexptest () {<br/> var ver = Number (scriptenginemajorversion () + ". "<br/> + scriptengineminorversion () <br/> var ans =''; <br/> If (ver >=5.5) {// test the JScript version. <Br/> var src = "The rain in Spain falls mainly in the plain. "; <br/> var Re =/\ W +/g; // create the regular expression mode. <Br/> var arr; <br/> while (ARR = re.exe C (SRC ))! = NULL) <br/> ans + = arr. index + "-" + arr. lastindex + arr + "\ t"; <br/>}else {<br/> ans = "Please use the updated version of JScript "; <br/>}< br/> return ans; <br/>}</P> <p>/** <br/> * checks the regular expression of the source string, check whether the regular expression is correct. <br/> */<br/> function testdemo () {<br/> var S1; <br/> var source = "abcdefg "; <br/> var RegEx =/\ W +/g; // create the regular expression mode. <Br/> If (RegEx. test (source) <br/> S1 = "contains"; <br/> else <br/> S1 = "does not contain "; <br/> return ("'" + Source + "'" + S1 + "'" + RegEx. source + "'"); <br/>}</P> <p>/** <br/> * Find the regular expression string in the source string. <br/> * @ return {}< br/> */<br/> function searchdemo () {<br/> var R, RE; <br/> var S = "The rain in Spain falls mainly in the plain. "; <br/> Re =/falls/I; <br/> r = S. search (re); <br/> return (r); <br/>}

For more information, see http://www.jb51.net/article/26005.htm.

Unfinished, To be continued ......

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.