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


Posted in Javascript onSeptember 06, 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 相关文章推荐
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
JS生成不重复随机数组的函数代码
Jun 10 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
vue递归获取父元素的元素实例
Aug 07 Javascript
Document对象内容集合(比较全)
Sep 06 #Javascript
Jquery优化效率 提升性能解决方案
Sep 06 #Javascript
jquery中this的使用说明
Sep 06 #Javascript
firefox下frameset取不到值的解决方法
Sep 06 #Javascript
js过滤数组重复元素的方法
Sep 05 #Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 #Javascript
JavaScrip单线程引擎工作原理分析
Sep 04 #Javascript
You might like
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
社区(php&amp;&amp;mysql)三
2006/10/09 PHP
PHP 的几个配置文件函数
2006/12/21 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
PHP在线生成二维码代码(google api)
2013/06/03 PHP
php判断两个浮点数是否相等的方法
2015/03/14 PHP
实例讲解php实现多线程
2019/01/27 PHP
js里的prototype使用示例
2010/11/19 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
简单讲解Python中的闭包
2015/08/11 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
厨房工作人员岗位职责
2013/11/15 职场文书
会议开场欢迎词
2014/01/15 职场文书
行政副总岗位职责
2014/02/23 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
给校长的建议书400字
2014/05/15 职场文书
化学教育专业求职信
2014/07/08 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
2015年度招聘工作总结
2015/05/28 职场文书