伪元素"content“属性中的CSS变量(自定义属性)
伪元素"content“属性中的CSS变量(自定义属性)
提问于 2016-10-20 20:42:09
示例使用(我想要的)
div::after {
content: var(--mouse-x) ' / ' var(--mouse-y);
}测试用例显示它不起作用：
CodePen:伪元素“内容：”属性(测试用例)中的CSS变量
document.addEventListener('mousemove', (e) => {
document.documentElement.style.setProperty('--mouse-x', e.clientX)
document.documentElement.style.setProperty('--mouse-y', e.clientY)
// output for explanation text
document.querySelector('.x').innerHTML = e.clientX
document.querySelector('.y').innerHTML = e.clientY
})/* what I want!! */
div::after {
content: var(--mouse-x, 245)" / " var(--mouse-y, 327);
}
/* setup and presentation styles */
div::before {
content: 'mouse position:';
}
div {
position: absolute;
top: 0;
left: 0;
transform: translate(calc(var(--mouse-x, 245) * 1px), calc(var(--mouse-y, 327) * 1px));
width: 10em;
height: 10em;
background: #ff3b80;
color: #fff;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
border-radius: 100%;
will-change: transform;
}
body {
margin: 2em;
font-family: sans-serif;
}
p {
max-width: 50%;
min-width: 25em;
}<!-- test case: element with pseudo element -->
<div></div>
<!-- explanation (not test case) -->
<main>
<pre><code>div::after {
content: var(--mouse-x) ' / ' var(--mouse-y);
}</code></pre>
<h1>If this worked...</h1>
<p>
We should see something like this: <b><span class="x">245</span> / <span class="y">327</span></b> updating with the mousemove coordinates inside the pseudo <i>::after</i> element for the div.
</p>
</main>
Stack Overflow用户
发布于 2020-10-13 15:53:21
content属性只允许字符串，而且由于您与数字不对齐，并且CSS不能转换变量，因此您可以选择创建另一组变量(来自JS)，这些变量将用作打印值，并且类型为String。
要将--mouse-x-text设置为String，使用旧的抛出技巧2+"" = "2"将其转换为该类型是不够的，但String是我所知道的唯一可以输出“真实”字符串的方法，从已经存在的字符串值中输出，哪种类型意味着字符串的字符串，因为CSS似乎要去掉第一个字符串层。
document.addEventListener('mousemove', ({clientX:x, clientY:y}) => {
const {style} = document.documentElement
style.setProperty('--mouse-x', x)
style.setProperty('--mouse-y', y)
// for printing
style.setProperty('--mouse-x-text', JSON.stringify(x+""))
style.setProperty('--mouse-y-text', JSON.stringify(y+""))
})body::before{
content: "X:"var(--mouse-x-text)" Y:"var(--mouse-y-text);
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40164169
复制相关文章
相似问题
腾讯云开发者
