在CSS中,任何图像路径都相对于CSS文件位置。
f.ex如果我放入CSS文件/media/css/mystyles.css并使用类似
/media/css/mystyles.css
.background:url(../images/myimage.jpg);
浏览器将查找/media/images/myimage.jpg有意义的图像。
/media/images/myimage.jpg
是否可以在javascript中做同样的事情?
F.ex如果我包括/media/js/myscript.js以下代码并将其放在其中:
/media/js/myscript.js
var img = new Image(); img.src = '../images/myimage.jpg';
找不到图片,因为浏览器使用HTML文件作为起点,而不是脚本位置。我希望能够像CSS一样使用脚本位置作为起点。 这可能吗?
<script>按照上面的方法在DOM中搜索您自己的标记是可以的。
<script>
但是,您通常不需要太费劲:当您处于脚本正文中时(在include- time上运行),您将非常清楚<script>自己是哪个元素:最后一个。它们中的其余部分尚未解析。
var scripts= document.getElementsByTagName('script'); var path= scripts[scripts.length-1].src.split('?')[0]; // remove any ?query var mydir= path.split('/').slice(0, -1).join('/')+'/'; // remove last filename part of path function doSomething() { img.src= mydir+'../images/myimage.jpeg'; }
如果您的脚本已与<script defer>(或在HTML5中<script async>)链接在一起,则情况并非如此。但是,目前很少使用。
<script defer>
<script async>