更改没有Javascript的自定义CSS属性？ [英] Changing custom CSS attributes without Javascript?
问题描述
所以我做一些wiki编辑，可悲的是Javascript没有启用。因此，我需要来自CSS guru的帮助。
我知道你可以添加一个自定义的HTML属性，例如：
< span id =some-idcustom_attr =no>< / span&
您可以使用 custom_attr 这个：
span [custom_attrib] {/ * styleing here * /}/ pre>
现在，有没有办法编辑CSS中的HTML属性？
当然不工作..）：
<！------------- CSS ------------>
< style>
.some-class {
/ *原始代码在这里* /
}
.some-class [custom_attr =yes] {
/ * * /
}
＃some-id：hover〜.some-class {custom_attr =no] {
custom_attr：yes;
}
< / style>
<！------------- HTML ------------>
< html>
...
< span id =some-id> ...< / span>
< span class =some-classcustom_attr =no> ...< / span>
...
< / html>
解决方案当然，您可以使用CSS编辑HTML！ / p>
在您的示例代码中，当用户
悬停就可以了。方法如下：
< a default =YESmouseover =NO>< / a>
a $ {
font-size：3em;
}
a：after {
content：attr（default）;
}
a：hover：after {
content：attr（mouseover）;
}
您是否要在
上点击而不是？很容易！
http://jsfiddle.net/ENZQU / 1 /
< input id =cboxtype =checkbox>
< label for =cbox>< / label>
#cbox {
display：none;
}
label {
font-size：3em;
}
label：after {
content：YES
}
#cbox：checked + label：after {
content：NO
}
我强烈建议你找到另一种方法来做到这一点。维基不希望你动态地改变页面上的东西，它可能是这样的原因。
So I am doing some wiki editing, and sadly Javascript is not enabled. Therefore, I need help from the CSS guru's out there!
I understand you can add a custom HTML attribute like this:
<span id="some-id" custom_attr="no"></span>And you can style elements with
custom_attrlike this:span[custom_attrib] { /* styling here */ }Now, is there a way to edit the HTML attribute inside the CSS?
Example (which does not work of course..):
<!------------- CSS ------------> <style> .some-class { /* Original code here */ } .some-class[custom_attr = "yes"] { /* Change code here */ } #some-id:hover ~ .some-class[custom_attr = "no"] { custom_attr : "yes"; } </style> <!------------- HTML ------------> <html> ... <span id="some-id">...</span> <span class="some-class" custom_attr="no">...</span> ... </html>
解决方案Of course you can edit the HTML with CSS!
From your example code, it looks like you want to change the "No" to "Yes" when the user
hoverson it. Here's how:<a default="YES" mouseover="NO"></a> a { font-size: 3em; } a:after { content: attr(default); } a:hover:after { content: attr(mouseover); }Did you want it on
clickinstead? Easy!<input id="cbox" type="checkbox"> <label for="cbox"></label> #cbox { display: none; } label { font-size: 3em; } label:after { content: "YES" } #cbox:checked + label:after { content: "NO" }I strongly suggest that you find another way to do this, though. The wiki doesn't want you to dynamically change things on the page, and it's probably built that way for a reason.
这篇关于更改没有Javascript的自定义CSS属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
