Javascript CSS不适用于bookmarklet

我正在创建一个简单的bookmarklet（以前从未这样做过），虽然脚本执行得很好（现在没有太多功能），但是嵌入的CSS样式表不适用于HTML

激活链接如下（域已更改）：

然后，名为的脚本是：

if (typeof jQuery == 'undefined') {

    appendjQuery();

} else {

    jsVersion = $().jquery;
    versionArray = jsVersion.split('.');

    if (versionArray[1] < 6) {

        appendjQuery();

    } else {

        runthis();

    }
}

function appendCSS() {

    var cloudlrCSS = document.createElement('link');
    cloudlrCSS.type = 'text/css';
    cloudlrCSS.href = 'http://www.mydomain.co.uk/cloudlr/app/css/screen.css';
    cloudlrCSS.media = 'all';
    document.head.appendChild(cloudlrCSS);

}

function appendjQuery() {

    var cloudlrJS = document.createElement('script');
    cloudlrJS.type = 'text/javascript';
    cloudlrJS.onload = runthis;
    cloudlrJS.onreadystatechange = function () {

        if (this.readyState == 'loaded' || this.readyState == 'complete') {
            runthis();
        }

    }
    cloudlrJS.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js';
    document.head.appendChild(cloudlrJS);
}

function runthis() {

    appendCSS();

    $(document).ready(function() {

        $("img").each(function() {
            var $this = $(this);
            var imageWidth = $(this).width();
                $(this).before(imageWidth);
        });

        var cloudlrOverlay = '<div id="cloudlr-content">This is some content.</div><div id="cloudlr-overlay"></div>';

        $("body").append(cloudlrOverlay);

    });


}

if（typeof jQuery==“未定义”）{
appendjQuery（）；
}否则{
jsVersion=$（）.jquery；
versionArray=jsVersion.split（'.'）；
if（versionArray[1]<6）{
appendjQuery（）；
}否则{
runthis（）；
}
}
函数appendCSS（）{
var cloudlrCSS=document.createElement（'link'）；
cloudlrCSS.type='text/css'；
cloudlrCSS.href=http://www.mydomain.co.uk/cloudlr/app/css/screen.css';
cloudlrCSS.media='all'；
document.head.appendChild（cloudlrCSS）；
}
函数appendjQuery（）{
var cloudlrJS=document.createElement（'script'）；
cloudlrJS.type='text/javascript'；
cloudlrJS.onload=runthis；
cloudlrJS.onreadystatechange=函数（）{
如果（this.readyState=='loaded'| | this.readyState=='complete'）{
runthis（）；
}
}
cloudlrJS.src=http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js';
document.head.appendChild（cloudlrJS）；
}
函数runthis（）{
appendCSS（）；
$（文档）.ready（函数（）{
$（“img”）。每个（函数（）{
var$this=$（this）；
var imageWidth=$（this.width（）；
$（此）.before（图像宽度）；
});
var cloudlrOverlay='这是一些内容'；
$（“正文”）。追加（云覆盖）；
});
}

希望这一切都很简单

脚本执行得很好（jQuery），但没有应用CSS。如果我查看“生成的源代码”，我可以看到CSS插入得很好，指向该文件的链接也可以正常工作。所以我不确定发生了什么

我对这一点还不熟悉，并欢迎就最佳实践和问题解决方案提出更多建议

非常感谢,， 迈克尔

这是一个常见的错误。。。我想这对你有帮助

---

这是一个常见的错误。。。我认为这可以帮助您

您可以尝试设置

cloudlrCSS.rel='stylesheet'格雷格-回答了！它现在起作用了。谁会想到呢？也许它是特定于浏览器的。我使用的是Firefox5。非常感谢你。把它作为一个问题写下来，我会给你分数。你可以试着设置
cloudlrCSS.rel='stylesheet'格雷格-回答了！它现在起作用了。谁会想到呢？也许它是特定于浏览器的。我使用的是Firefox5。非常感谢你。把它作为一个问题写下来，我会给你分数。保重。谢谢你的意见，我会考虑的。你有没有可能在样式表问题上帮助我？`$（this）.before（imageWidth）；`您不能在将一个元素添加到另一个元素之前将一个元素添加到其宽度。。。不是吗？谢谢你的意见，我会考虑的。你有没有可能在样式表问题上帮助我？`$（this）.before（imageWidth）；`您不能在将一个元素添加到另一个元素之前将一个元素添加到其宽度。。。不是吗？
if (typeof jQuery == 'undefined') {

    appendjQuery();

} else {

    jsVersion = $().jquery;
    versionArray = jsVersion.split('.');

    if (versionArray[1] < 6) {

        appendjQuery();

    } else {

        runthis();

    }
}

function appendCSS() {

    var cloudlrCSS = document.createElement('link');
    cloudlrCSS.type = 'text/css';
    cloudlrCSS.href = 'http://www.mydomain.co.uk/cloudlr/app/css/screen.css';
    cloudlrCSS.media = 'all';
    document.head.appendChild(cloudlrCSS);

}

function appendjQuery() {

    var cloudlrJS = document.createElement('script');
    cloudlrJS.type = 'text/javascript';
    cloudlrJS.onload = runthis;
    cloudlrJS.onreadystatechange = function () {

        if (this.readyState == 'loaded' || this.readyState == 'complete') {
            runthis();
        }

    }
    cloudlrJS.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js';
    document.head.appendChild(cloudlrJS);
}

function runthis() {

    appendCSS();

    $(document).ready(function() {

        $("img").each(function() {
            var $this = $(this);
            var imageWidth = $(this).width();
                $(this).before(imageWidth);
        });

        var cloudlrOverlay = '<div id="cloudlr-content">This is some content.</div><div id="cloudlr-overlay"></div>';

        $("body").append(cloudlrOverlay);

    });


}

$("img").each(function(i,n) {
    var $this = $(n);//don't know why this is here but hey
    var imageWidth = $(n).width();
        $(n).before(imageWidth);
});