:after pseudo-element and tags
I just created a simple page where I tried to emulate ajax with CSS. For doing that, I wanted to create invisible radio-buttons with visible labels, an external CSS-file should be loaded as soon as the user clicks on a label. There is just one problem: Tags are printed out as plain text inside the class. Is there a way to handle that?
edit: As requested, my code:
<!doctype html>
<html><head>
<title>Demo: Ajax without JS</title>
<style type="text/css">
#loader:checked:after{
content:'<link class="sheet" rel="stylesheet" type="text/css" href="external.css"/>';
}
</style>
</head><body>
<div class="rad"><input type="radio" id="l开发者_StackOverflow中文版oader"/><label for="loader">Loader</label></div>
</body></html>
Yes, it is as simple as possible.
Simply speaking, you cannot do this. Generated content is viewed as presentation, and is thus not actually inserted into the DOM.
Note that the generated content is only rendered—it doesn’t appear in the DOM tree. In other words, generated content doesn’t alter the document as such—only the presentation.
http://reference.sitepoint.com/css/content
Thus everything you try to insert will be rendered in plain text. Another implication of this is that whatever you generate with content you cannot manipulate with Javascript. So you're stuck with Javascript for this sort of things.
See also: https://developer.mozilla.org/en/CSS/content
加载中,请稍侯......
精彩评论