动态加载图片路径 保持JavaScript控件的相对独立性


Posted in Javascript onSeptember 03, 2010

当时考虑有三种方法:
1.直接把路径写在js文件里,但如果引用页面路径层级改变就没辙了。
2.写个class,放在主题包里的css文件或者单独创建一个css文件给日期控件专用。但是控件中的其他元素并没有使用class的需要,单独建立相应css文档似乎小题大做。
3.把以上两个方法排除后,自然要采用动态加载图片路径的方法咯。
关键代码如下:

//创建一个全局变量保存路径 
var imgRootUrl = ""; //获取图片路径所在目录 
var strPath=window.document.location.pathname; //获取主机地址之后的目录部分 
var thisUrlCount = strPath.split('/'); 
var hierarchyOfFolders = thisUrlCount.length-2;//获取目录层级 
for(iRoot=0;iRoot<hierarchyOfFolders;iRoot++) 
{ 
imgRootUrl +="../"; 
} 
imgRootUrl +="Images/"; //这个Images其实也可设为参数,由于所有项目图片文件夹命名固定,所以没有设立参数,但仍然保存可扩展性。

加图后,控件效果是相当美观了:
动态加载图片路径 保持JavaScript控件的相对独立性
顺便附上所有window.document.location其下属性:
document.location.hash // #号后的部分 VS window.location.hash
document.location.host // 域名+端口号
document.location.hostname // 域名
document.location.href // 完整URL
document.location.pathname // 目录部分(应用程序)
document.location.port // 端口号
document.location.protocol // 网络协议(http:)
document.location.search // ?号后的部分
Javascript 相关文章推荐
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
JS中精巧的自动柯里化实现方法
Dec 12 Javascript
在vue里面设置全局变量或数据的方法
Mar 09 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
Dojo 学习要点
Sep 03 #Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 #Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 #Javascript
Jquery中dialog属性小记
Sep 03 #Javascript
javascript中使用css需要注意的地方小结
Sep 01 #Javascript
js截取函数(indexOf,join等)
Sep 01 #Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 #Javascript
You might like
php获取Google机器人访问足迹的方法
2015/04/15 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
[原创]pip和pygal的安装实例教程
2017/12/07 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
Python dict的常用方法示例代码
2020/06/23 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
塔吉特百货公司官网:Target
2017/04/27 全球购物
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
平面设计岗位职责
2013/12/14 职场文书
小学生期末自我鉴定
2014/01/19 职场文书
西北政法大学自主招生自荐信
2014/01/29 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书