css应该放在哪里,jquery插件开发中css应该放在哪？

写个插入css样式的方法，将样式作为json数据。这样css和js可以合并了。

我自己写的toast效果，只要页面引入这个js，调用Toast()方法就可以实现效果了。

新人求赞~

function Sheet(rulers){

this.style = (function(){

var style = document.createElement("style");

document.getElementsByTagName("head")[0].appendChild(style);

//style.appendChild(document.createTextNode(""));/* For Safari */

return style;

})();

this.sheet = this.style.styleSheet || this.style.sheet;;

if(rulers) this.addCSSRulers(rulers);

return this;

}

Sheet.prototype.addCSSRulers = function(rulerJson){

for(var k in rulerJson)

this.addCSSRuler(k,rulerJson[k]);

return this;

}

Sheet.prototype.addCSSRuler = function(selector,ruler){

if(this.sheet.insertRule)

this.sheet.insertRule(selector+" {"+ruler+"}",this.sheet.cssRules.length);

else if("addRule" in this.sheet)

this.sheet.addRule(selector,ruler,-1);

return this;

}

Sheet.prototype.empty = function(){

return this;

}

//创建Node节点

function NewObject(tag, attrs, txt) {

var res = document.createElement(tag);

if (attrs != null)

for (var k in attrs) {

if(k=="className"){

res.className = attrs[k];

continue;

}

if (typeof attrs[k] == "object" && k == "style") ;//$(res).css(attrs[k]);

else res.setAttribute(k,attrs[k]);//$(res).attr(k, attrs[k]);

};

if (txt != null) {

if(tag=="input" || tag=="select" || tag=="textarea")

res.value = txt;

else

res.appendChild(document.createTextNode(txt));

}

return res;

}

window.onload = function(){

//1.插入样式

new Sheet({

".toast": "position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; flex-direction: column;",

".toast.hidden": "visibility: hidden;",

".toast.fadeout": "-webkit-animation: fadeout 3s ease;",

".toast > div": "border-radius: 5px; padding: 2rem; color: #fff; background-color: rgba(0,0,0,0.6);",

"@-webkit-keyframes fadeout": "0%{ opacity: 0.2; } 50%{ opacity: 1; } 100%{ opacity: 0; }"

});

//2.插入HTML

var odiv = NewObject("div",{"className": "toast hidden"});

odiv.appendChild(NewObject("div"));

document.body.appendChild(odiv);

//3.绑定事件

odiv.addEventListener('animationend', function(){

this.className = this.className.replace(/\b(fadeout)\b/,"")+" hidden";

});

//提供接口API

window.ShowToast = function(txt,fn){

var oc = odiv.getElementsByTagName("div")[0];

if(txt){

oc.innerHTML = txt;

}

if(/\b(fadeout)\b/.test(odiv.className)==false) odiv.className = odiv.className.replace(/\bhidden\b/,"")+" fadeout";

if(txt && fn) fn();

}

}