CSS 不适用于小书签

Question

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

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

<a href="javascript:(function(){document.head.appendChild(document.createElement('script')).src='http://www.mydomain.co.uk/cloudlr/app/js/cloudlr.js?rand=' + Math.floor(Math.random()*99999);})();">Do this</a>

然后调用的脚本是：

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);

    });


}

希望这一切都非常简单。

脚本执行得很好（jQuery），但没有应用 CSS。如果我查看“生成的源”，我可以看到 CSS 插入得很好并且文件的链接有效。所以我不确定发生了什么事。

我对此很陌生，欢迎任何有关最佳实践以及问题解决方案的其他建议。

非常感谢， 迈克尔.

Answer 1

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

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