通过 CSS3 的 content 获取内容,很有意思的一个思路,实际场景中有可能用的到:

CSST (CSS Text Transformation)

利用js动态创建一个link插入到文档中, 请求css文件.

利用 computedStyle = window.getComputedStyle 获取指定元素的 style 对象

利用 computedStyle .content 获取内容

服务端可以返回的 css 文件内容:

@keyframes anima {
from {}
to {
opacity: ;
}
}
@-webkit-keyframes anima {
from {}
to {
opacity: ;
}
}
#CSST {
content: "${text}";
animation: anima 2s;
-webkit-animation: anima 2s;
}

${text}就是我们要填充的数据

监听函数 animationstart/webkitAnimationStart 来判断css是否加载完成

给#CSST元素设置动画

js逻辑:

function handle () {
var computedStyle = getComputedStyle(span, false);
var content = computedStyle.content;
console.log('content: %s', content);
var match = content.match(/[\w+=\/]+/);
// base64解码
if (match) {
try {
content = decodeURIComponent(escape(atob(match[])));
} catch (ex) {
fn(ex);
return;
}
}
return content
}
var CSST = document.getElementById('CSST');
//监听事件
CSST.addEventListener('animationstart', handler, false);
CSST.addEventListener('webkitAnimationStart', handler, false);

办公资源网址导航 https://www.wode007.com

元素动画启动,就可以获取到 content 里的内容了

05-11 15:02