Javascript 用jquery添加css文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5680657/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
adding css file with jquery
提问by Jay
I am creating a popupwindow and I want to add a css file to that popupwindow below is the code for popupwindow. I have a javascript with creates a popupwindow.
我正在创建一个弹出窗口，我想向该弹出窗口添加一个 css 文件，下面是弹出窗口的代码。我有一个 javascript 可以创建一个弹出窗口。
<a href="popupwindowcontent.xhtml" title="Print" class="popupwindow">Print1</a>
Now I want to add a css file to this popupwindow. I tried something like
现在我想向这个弹出窗口添加一个 css 文件。我试过类似的东西
$('.popupwindow').append('<link rel="stylesheet" href="css/style2.css" type="text/css" />');
$('head').append('<link rel="stylesheet" href="css/style2.css" type="text/css" />');
but doesnt work.
但不起作用。
Thanks
谢谢
回答by Etienne Dupuis
$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
This should work.
这应该有效。
回答by Dilip Rajkumar
This is how I add css using jQuery ajax. Hope it helps someone..
这就是我使用 jQuery ajax 添加 css 的方式。希望它可以帮助某人..
$.ajax({
url:"site/test/style.css",
success:function(data){
$("<style></style>").appendTo("head").html(data);
}
})
回答by zuzuleinen
var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: "yourcustomaddress/bundles/andreistatistics/css/like.css"
});
css_link.appendTo('head');
回答by Mr. Pumpkin
Just my couple cents... sometimes it's good to be sure there are no any duplicates... so we have the next function in the utils library:
只是我的几美分……有时最好确保没有任何重复……所以我们在 utils 库中有下一个函数：
jQuery.loadCSS = function(url) {
if (!$('link[href="' + url + '"]').length)
$('head').append('<link rel="stylesheet" type="text/css" href="' + url + '">');
}
How to use:
如何使用：
$.loadCSS('css/style2.css');
回答by Mark Costello
Try doing it the other way around.
试着反过来做。
$('<link rel="stylesheet" href="css/style2.css" type="text/css" />').appendTo('head');
回答by Feisty Mango
Your issue is that your selector is for an anchor element <a>. You are treating the <a>tag as if it represents the page which is not the case.
您的问题是您的选择器用于锚元素<a>。您将<a>标签视为代表页面，但事实并非如此。
$('head')will work as long as this selector is being executed by the page that needs the css.
$('head')只要需要 css 的页面正在执行此选择器，它就会工作。
Why not simply add the css file to the page in question. Any particular reason to attempt this dynamically from another page? I am not even familiar with a way to inject css to remote pages like this ... seems like it would be a major security hole.
为什么不简单地将 css 文件添加到相关页面。从另一个页面动态尝试此操作的任何特殊原因？我什至不熟悉将 css 注入到这样的远程页面的方法......似乎这将是一个主要的安全漏洞。
ADDENDUM to your reasoning:
补充你的推理：
Then you should simply pass a parameter to the page, read it using javascript, and then do whatever is needed based on the parameter.
然后你应该简单地向页面传递一个参数，使用javascript读取它，然后根据参数做任何需要的事情。
回答by FatherStorm
I don't think you can attach down into a window that you are instancing... I KNOW you can't do it if the url's are on different domains (XSS and all that jazz), but you can talk UP from that window and access elements of the parent window assuming they are on the same domain. your best bet is to attach the stylesheet at the page you are loading, and if that page isn't on the same domain, (e.g. trying to restyle some one else's page,) you won't be able to.
我不认为你可以附加到你正在实例化的窗口中......我知道如果 url 位于不同的域（XSS 和所有爵士乐）上，你不能这样做，但是你可以从那个窗口说话并访问父窗口的元素，假设它们在同一个域中。最好的办法是在您正在加载的页面上附加样式表，如果该页面不在同一个域中（例如尝试重新设计其他人的页面），您将无法这样做。
回答by fehays
Have you tried simply using the media attribute for you css reference?
您是否尝试过简单地使用 media 属性作为您的 css 参考？
<link rel="stylesheet" href="css/style2.css" media="print" type="text/css" />
Or set it to screen if you don't want the printed version to use the style:
或者，如果您不希望打印版本使用该样式，则将其设置为 screen：
<link rel="stylesheet" href="css/style2.css" media="screen" type="text/css" />
This way you don't need to add it dynamically.
这样您就不需要动态添加它。
