我有一个脚本,我在按下这样的按钮时加载一个CSS样式表:
link = "
然后我需要根据css的width和height属性做一些计算:
function CSSDone(){
if($(window).width()>640){
$(".grid-item").css({"height":$(".grid-item").width()*0.2});
$(".grid_item_img").css({"height":$(".grid-item").width()*0.2});
console.log("a");
}else{
$(".grid-item").css({"height":$(".grid-item").width()*0.33});
$(".grid_item_img").css({"height":$(".grid-item").width()*0.33});
console.log("b");
}
}
CSSDone();
但是,如果我启动CSSDone();在添加样式表之后,计算在加载css之前发生.
我疯狂搜索网页,但我尝试的一切都不起作用:
我试过这些选项:
1)不起作用:
link.onload = function () {
CSSDone();
}
2)不起作用:
if (link.addEventListener) {
link.addEventListener('load',function() {
CSSDone();
},false);
}
3)不起作用:
link.onreadystatechange = function() {
var state = link.readyState;
if (state === 'loaded' || state === 'complete') {
link.onreadystatechange = null;
CSSDone();
}
};
4)不起作用:
$(window).load(function () {
CSSDone();
});
5)不起作用:
$(window).bind("load",function() {
CSSDone();
});
相信我.什么都行不通……
一个解决方法:
最佳答案
您需要在头部插入一个链接节点,然后将onload事件附加到该节点.在您的代码链接中是一个字符串.请参阅下面的示例代码,了解如何实现您想要的功能.
原文链接:https://www.f2er.com/css/427658.htmlvar link = document.createElement('link');
link.setAttribute("rel","stylesheet");
link.setAttribute("type","text/css");
link.onload = function(){ CSSDone(); }
link.setAttribute("href",'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
document.getElementsByTagName("head")[0].appendChild(link);