Javascript动态性建立 style 连接点

日期:2020-12-10 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序


有许多出示动态性建立 style 连接点的方式,可是大多数数都仅限于外界的 css 文档。怎样能应用程序流程转化成的标识符串动态性建立 style 连接点,我搞了2个小时。
静态数据外界 css 文档英语的语法:
@import url(style.css);
动态性外界 css 文档载入的方式有以下:
第1种:
var style = document.createElement(’link’);
style.href = ’style.css’;
style.rel = ’stylesheet’;
style.type = ‘text/css’;
document.getElementsByTagName(’HEAD’).item(0).appendChild(style);
第2种简易:
document.createStyleSheet(style.css);
动态性的 style 连接点,应用程序流程转化成的标识符串:
var style = document.createElement(’style’);
style.type = ‘text/css’;
style.innerHTML=”body{ background-color:blue; }”;
document.getElementsByTagName(’HEAD’).item(0).appendChild(style);
很遗憾,上面的编码在 ff 里边取得成功,可是 ie 不适用。从老外论坛获得编码:
var sheet = document.createStyleSheet();
sheet.addRule(’body’,'background-color:red’);
取得成功,可是很不便,要把标识符串拆卸写,长1点的写死。
接着搜,在1个不知道道甚么我国的甚么語言的 blog 上寻找编码:
document.createStyleSheet(”javascript:’body{background-color:blue;’”);
取得成功,这人确实强大,可是难题出来了,url 最大 255 个标识符,长1点的就不好了,历经 SXPCrazy 提醒,改为:
window.style=”body{background-color:blue;”;
document.createStyleSheet(”javascript:style”);
完善处理!!编码:
<html>
<head>
<script>
function blue(){
if(document.all){
window.style="body{background-color:blue;";
document.createStyleSheet("javascript:style");
}else{
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML="body{ background-color:blue }";
document.getElementsByTagName('HEAD').item(0).appendChild(style);
}
}
</script>
</head>
<body>
<input type="button" value="blue" onclick="blue();"/>
</body>
</html>