引自:http://myext.cn/Article/1169.html
用js实现的对css的一些操作方法,集合,方便需要用js控制css的朋友
//获取元素的真实的,最终的CSS样式属性值的函数
function getStyle(elem,name){
if(elem.style[name]){
return elem.style[name];
}else if(elem.currentStyle){
return elem.currentStyle[name];
}else if(document.defaultView && document.defaultView.getComputedStyle){
name = name.replace(/([A-Z])/g,"-$1");
name = name.toLowerCase();
var s = document.defaultView.getComputedStyle(elem,"");
return s && s.getPropertyValue(name);
}else{
return null;
}
}
//两个确定元素相对于整个文档的X和Y位置的辅助位置
function pageX(elem){
return elem.offsetParent?
elem.offsetLeft+pageX(elem.offsetParent):
elem.offsetLeft;
}
function pageY(elem){
return elem.offsetParent?
elem.offsetTop+pageY(elem.offsetParent):
elem.offsetTop;
}
//确定元素相对于父亲的位置的两个函数
function parentX(elem){
return elem.parentNode == elem.offsetParent?
elem.offsetLeft:
pageX(elem)-pageX(elem.parentNode);
}
function parentY(elem){
return elem.parentNode==elem.offsetParent?
elem.offsetTop:
pageY(elem)-pageY(elem.parentNode);
}
//确定元素相对于它的CSS容器的位置
function posX(elem){
return parseInt(getStyle(elem,"left"));
}
function posY(elem){
return parseInt(getStyle(elem,"top"));
}
//设置元素x和y位置(与当前位置无关)的函数
function setX(elem,pos){
elem.style.left = pos+"px";
}
function setY(elem,pos){
elem.style.top = pos+"px";
}
//调整元素相对于当前位置的距离的函数
function addX(elem,pos){
setX(posX(elem)+pos);
}
function addY(elem,pos){
setY(posY(elem)+pos);
}
//获取元素当前的高度和宽度
function getHeight(elem){
return parseInt(getStyle(elem,'height'));
}
function getWidth(elem){
return parseInt(getStyle(elem,'width'));
}
//即是元素隐藏,也能分别获取它潜在的完整高度和宽度的两个函数
function fullHeight(elem){
if(getStyle(elem,'display')!='none'){
return elem.offsetHeight||getHeight(elem);
}
var old = resetCSS(elem,{
display:'',
visibility:'hidden',
position:'absolute'
});
var h = elem.clientHeight||getHeight(elem);
restoreCSS(elem,old);
return h;
}
function fullWidth(elem){
if(getStyle(elem,'display')!='none'){
return elem.offsetWidth || getWidth(elem);
}
var old = resetCSS(elem,{
display:'',
visibility:'hidden',
position:'absolute'
});
var w = elem.clientWidth || getWidth(elem);
restoreCSS(elem,old);
return w;
}
function resetCSS(elem,prop){
var old = [];
for(var i in prop){
old = elem.style;
elem.style = prop;
}
return old;
}
function restoreCSS(elem,prop){
for(var i in prop){
elem.style = prop;
}
}
//使用CSS的display属性来切换元素可见性的一组函数
function hide(elem){
var curDisplay = getStyle(elem,'display');
if(curDisplay != 'none'){
elem.$oldDisplay= curDisplay;
}
elem.style.display = 'none';
}
function show(elem){
elem.style.display = elem.$oldDisplay ||'';
}
//设置元素的透明度
function setOpacity(elem,level){
if(elem.filters){
elem.style.filters = 'alpha(opacity='+level+')';
}else{
elem.style.opacity = level/100;
}
}
分享到:
相关推荐
用js实现的对css的一些操作方法,集合,方便需要用js控制css的朋友
14.3.2 使用JwaScript和CSS实现页面多种风格的实时替换 14.4 总结 第15章 数据存储的脚本化 15.1 什么是cookie 15.1.1 浏览器和客户端cookie 15.1.2 cookie的属性 15.2 cookie的客户端存取...
DHTML&javascript 使用手册 动态 HTML (DHTML) 对象模型参考 DHTML 对象 DHTML 属性 DHTML 方法 DHTML 事件 DHTML 集合 HTML 参考 HTML 元素 HTML 字符集 样式表(CSS)参考 CSS 属性参考 CSS 长度单位参考...
4、JavaSE:方法.pdf 5、JavaSE:数组.pdf 6、JavaSE:面向对象.pdf 7、JavaSE:异常机制.pdf 8、JavaSE:常用类.pdf 9、JavaSE:集合框架.pdf 10、JavaSE:IO流.pdf 11、JavaSE:多线程.pdf 12、JavaSE:...
1.vue优点? 答:轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb;...不同点:实现本质方法不同,v-show本质就是通过控制css中的display设置为none,控制隐藏,只会编译一次;v-if是动态的向D
提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。 文档就绪函数 您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready ...
点赞以及jQuery css操作 JQuery高度以及位置操作 JQuery 事件绑定的方式 JQuery事件之组织事件的发生 示例:表单验证 JQuery事件之页面框架和加载后自动执行 JQuery扩展以及自动执行函数的应用 JQuery阻止事件发生 ...
02 集合定义和基本操作方法 03 集合关系运算交,差,并集 04 集合的其他内置方法 05 集合补充 06 百分号字符串拼接 07 format字符串格式化 08 数学意义的函数与python中的函数 09 为何要有函数 10 函数返回值 11 可...
1.2.4 在javascript中使用json / 4 1.2.5 在.net中使用json / 8 1.2.6 在java中使用json / 12 1.2.7 更多有关json的信息 / 15 1.3 ext js 4概述 / 15 1.4 ext js的开发工具的获取、安装与配置介绍 / 18 1.4.1...
使用.ashx文件处理IHttpHandler实现发送文本及二进制数据的方法 制作一个简单的多页Tab功能 一完美的关于请求的目录不存在而需要url重写的解决方案! 在C#中实现MSN消息框的功能 XmlHttp实现无刷新三联动ListBox 鼠标...
Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, ...
9-27 3 循环控制 js的调试方法 9-27 4 函的数定义分类及使用 9-27 5 函数的调用 递归及深入使用 9-27 6 一维?榧笆樵谀诖嬷械拇嬖谛问? 9-27 7 常用数组的属性及使用方法 9-28 1课程回顾 9-28 2 二维数组的定义...
如:<script type="text/javascript" src="ymPrompt.js"></script> 2、在页面中引入对应的皮肤文件的CSS,如:<link rel="stylesheet" type="text/css" href="skin/qq/ymPrompt.css" /> 3、自定义组件的默认配置...
目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, ...
1. jQuery是一个优秀的JavaScript库,使用他可大大提高Web客户端的开发效率 2. 要使用jQuery的功能,需要首先引用jQuery库文件 3. $(document).ready()与window.onload使用场合类似,当有差异 4. jQuery代码中常见的...
)当那个发 生的时候,我们会提供透明的接口来直接呼叫Google的实现方法,而你已有的程序可以直接使用Google的新功能而不需要改变任何东西。而且,由于你 的程序在设计初期就是已经支持intents的了,当Google的...
目标是创建没有ViewState,没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源...
D3对Web标准的强调为您提供了现代浏览器的全部功能,而又不会使自己陷入专有框架,而是结合了强大的可视化组件和数据驱动的DOM操作方法。D3允许您将任意数据绑定到文档对象模型(DOM),然后将数据驱动的转换应用于...
需要学习 JDBC 技术,掌握如何使用 Java 来访问和操作数据库。 Web 开发:Java 在 Web 开发领域有广泛的应用,学习 Java Web 开发可以使你能够构建动态网站和 Web 应用。需要学习 Servlet、JSP、Tomcat 等相关技术...