动态加载图片路径 保持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 相关文章推荐
线路分流自动跳转代码;希望对大家有用!
Dec 02 Javascript
JavaScript中Object和Function的关系小结
Sep 26 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
Angular的MVC和作用域
Dec 26 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
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
关于js和php对url编码的处理方法
2014/03/04 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
Laravel 5.3 学习笔记之 错误&amp;日志
2016/08/28 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
javascript 面向对象编程基础 多态
2009/08/21 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
GoPro摄像机美国官网:美国运动相机厂商
2018/07/03 全球购物
怎样声明子类
2013/07/02 面试题
外贸公司实习自我鉴定
2013/09/24 职场文书
2013年大学生的自我鉴定
2013/10/24 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
大学军训感言1000字
2014/02/25 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
老干部工作汇报材料
2014/10/28 职场文书
北京颐和园导游词
2015/01/30 职场文书
财务人员个人工作总结
2015/02/27 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
运动会100米加油稿
2015/07/21 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers
ant design charts 获取后端接口数据展示
2022/05/25 Javascript
nginx访问报403错误的几种情况详解
2022/07/23 Servers