简体   繁体   English

:在伪元素和标签之后

[英]:after pseudo-element and tags

I just created a simple page where I tried to emulate ajax with CSS. 我只是创建了一个简单的页面,在其中尝试使用CSS模拟ajax。 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. 为此,我想创建带有可见标签的不可见单选按钮,用户单击标签后应立即加载外部CSS文件。 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="loader"/><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. 生成的内容被视为表示形式,因此实际上并未插入到DOM中。

Note that the generated content is only rendered—it doesn't appear in the DOM tree. 请注意,生成的内容仅被呈现-它不会出现在DOM树中。 In other words, generated content doesn't alter the document as such—only the presentation. 换句话说,生成的内容不会更改文档本身,而只会更改演示文稿。

http://reference.sitepoint.com/css/content 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. 这样做的另一个含义是,无论您用content生成什么content ,都无法使用Javascript操作。 So you're stuck with Javascript for this sort of things. 因此,您对于此类事情一无所知。

See also: https://developer.mozilla.org/en/CSS/content 另请参阅: https : //developer.mozilla.org/en/CSS/content

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM