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:
- Type: Always TXT/CSS
- Disabled: whether it is disabled
- HREF URL
- Title: label of the grouping style table
- Media: the target device type of the style sheet application, such as screen and print
- 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.
- Inserrule (rule, index): Used to add a new style declaration.
- Deleterule (INDEX): removes rules from the demo table
- Cssstylerule object attributes:
- Type inherits from an attribute of a cssrule object.
- Csstext
- Parentstylesheet
- Parentrule
- Selectortext
- Style
- Cssstyledeclaration object attributes:
- Csstext
- Parentrule
- Getpropertyvalue
- Removeproperty (propertyname)
- Removeproperty (propertyname)
- Setproperty (propertyname, value, priorty)
When Dom scripts encounter styles
- Change tags for application styles
Our final mark should be:
- Accessible For screen readers
- This is understandable when the image is disabled and CSS is valid.
- Maintain access-related features, such as ALT and title attributes.
- 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:
- If the image is disabled, nothing is displayed, because the span is still hidden.
- 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 ;}
/* 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 ^;