Relative path for contents of <style> tag
Is there a way to change the "current working directory" of the contents of a
<script> tag? The directory structure on my server looks like:
├── css
│ ├── flexigrid.css
│ └── images
│ ├── bg.gif
│ ├── ...
│ └── wbg.gif
└── js
└── flexigrid.js
3 directories, 21 files
So if I just had the following tag in my <head> I would be okay:
<link rel='stylesheet' type='text/css' href='/css/flexigrid.css' />
But I am loading the contents of the file as text and inserting them into the head w/ javascript:
// 'css' is a string containing the text of flexigrid.css
var css_el = document.createElement('style');
css_el.type = 'text/css';
css_el.innerHTML = css;
document.getElementsByTagName('head')[0].appendChild(css_el);
As a result, lines like this in the stylesheet:
background: #eee url(images/line.gif) repeat-y -1px top;
load URLs like /images/line.gif instead of /css/images/line.gif. Is there
a way to create the <style> tag such that the开发者_高级运维 url() calls start in the
/css directory instead of the base directory without having to
search-and-replace in javascript?
This ability and caching of the CSS are two major things you lose when you include CSS inline.
One thing you can do for tiny images, like a bullet or line, is convert them to a data: URL, and not worry about relative URLs.
Eventually you could create a .htaccess file with mod_rewrite directives.
But I think a way with JavaScript or CSS is not possible.
加载中,请稍侯......
精彩评论