Javascript DOM Advanced Programming 5 dynamic style modification and Cascading Style Sheet 1 (Source Code)-I want to stick to the end!

W3C dom2 style Specification

Now I want to post what I want in this ChapterSource code, Pay attention to the need to combine the ads library http://vdisk.weibo.com/s/Dq8NU

• Cssstylesheet object attributes:

1. Type: Always TXT/CSS
2. Disabled: whether it is disabled
3. HREF URL
4. Title: label of the grouping style table
5. Media: the target device type of the style sheet application, such as screen and print
6. Ownerrule: The cssrule object of the rule. If the style sheet is imported in a similar way, such as @ import, this attribute indicates the parent rule.
7. Inserrule (rule, index): Used to add a new style declaration.
8. Deleterule (INDEX): removes rules from the demo table

• Cssstylerule object attributes:

1. Type inherits from an attribute of a cssrule object.
2. Csstext
3. Parentstylesheet
4. Parentrule
5. Selectortext
6. Style

• Cssstyledeclaration object attributes:

1. Csstext
2. Parentrule
3. Getpropertyvalue
4. Removeproperty (propertyname)
5. Removeproperty (propertyname)
6. Setproperty (propertyname, value, priorty)

When Dom scripts encounter styles

• Change tags for application styles

Our final mark should be:

1. Accessible For screen readers
2. This is understandable when the image is disabled and CSS is valid.
3. Maintain access-related features, such as ALT and title attributes.
4. Avoid unnecessary tags-if possible

CSS image replacement classic technology: fir

 
<H2ID= "Advancedheader"> <Span>Advanced Dom Scripting</Span> </H2>
 

 

 /*  Add background image for parent Element  */  # Advancedheader {Border : 0 ; Padding : 0 ; /*  Remove styleing from other style sheets  */  Height : 60px ; Background : Transparent URL (http://advancedDOMScripting.com/images/advancED-replace.png) No-repeat ;} /*  Hide text */  # Advancedheader Span { Display : None ;}

However, this method has two problems:

1. If the image is disabled, nothing is displayed, because the span is still hidden.
2. The display: None attribute hides the content of the screen reader that supports CSS, completely undermining the accessibility principle in the push replacement.

Dwyer method (the 0-size additional span label is used, but it is still not accessible when CSS is effective and highlighted and disabled)

 /*  Add background image for parent Element  */  # Advancedheader { Border : 0 ; Padding : 0 ; /*  Remove styleing from other style sheets  */  Height : 60px ; Background : Transparent URL (http://advancedDOMScripting.com/images/advancED-replace.png) No-repeat ;} /*  Hide text with a 0-size box  */ # Advancedheader Span { Display : Block ; Width : 0 ; Height : 0 ; Overflow : Hidden ;}

The phark method (uses negative text indentation to hide content without additional labels, but this method still damages the accessibility when the CSS is effective and the image is disabled)

 /*  Hide text with background image and negative text indent  */ # Advancedheader { Border : 0 ; Padding : 0 ; /*  Remove styleing from other style sheets  */  Text-indent : -100em ; Overflow : Hidden ; Height :60px ; Background : Transparent URL (http://advancedDOMScripting.com/images/advancED-replace.png) No-repeat ;}

The shea method still attaches the <span>

<H2ID= "Advancedheader"Title= "Advanced Dom scripting"><Span> </Span>Advanced Dom Scripting</H2>
 

However, this method does not hide the text, but locates the <span> element of the background image with solid opacity above the text, so as to cover the text.

 /* The parent element wants to locate the child element, and the child element uses absolute positioning.  */  # Advancedheader { Border : 0 ; Padding : 0 ; /*  Remove styleing from other style sheets  */  Height : 60px ; Position : Relative ;}/*  Hide text after all by using different life types on the span element that is absolutely located  */  # Advancedheader Span { Background : Transparent URL (http://advancedDOMScripting.com/images/advancED-replace.png) No-repeat ; Display : Block ; Width : 100% ; Height : 100% ;Position : Absolute ;}

• Remove additional tags

 /*  Style added to text when the image is disabled  */  # Advancedheader { Color : # 1a5b9d ;} /*  Set the title size based on the Image  */  # Advancedheader. Advanced { Border :0 ; Padding : 0 ; Height : 60px ; Position : Relative ; Overflow : Hidden ;} /*  Hide text with an opaque Image  */  # Advancedheader. Advanced Span { Background : White URL (http://advancedDOMScripting.com/images/advancED-replace.png) No-repeat ; Display : Block ; Width : 100% ; Height : 100% ; Position : Absolute ;}

To make the page more attractive, the load event adds an additional <span> label to the title element and an additional. advanceed Class Name:

Ads. addevent (window, 'load ', Function (){  //  Get title      VaR Header = ads. $ ('advancedhead' );  //  Create Image Elements      VaR Image = Document. createelement ('img' );  //  After the image is loaded successfully, add the span and class names Ads. addevent (image, 'load ', Function  (){  VaR S = Document. createelement ('span');  //  Add a span as a subelement of the title  Ads. prependchild (header, S );  //  Create required title attributes          If (! Header. getattribute ('title' )){  VaR  I, child;  VaR Title ='' ;  //  Cyclically traverse sub-elements to combine title attributes             For (I = 0; child = header. childnodes [I]; I ++ ){  If (Child. nodevalue) Title + = Child. nodevalue;} header. setattribute ( 'Title' , Title );}  //  Modify the class name to indicate the change and apply CSS Header. classname = 'advanced' ;});  //  Load Image      //  This hard encoding method is not ideal.     //  The intention will be discussed later Image. src = 'HTTP: // advanceddomscripting.com/images/image-replace.png' ;}); 

Adding extra content is important for page degradation and cleanliness.

In addition. In fact, I am also confused about this chapter ^;