js CSS操作方法集合


Posted in Javascript onOctober 31, 2008

//获取元素的真实的,最终的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[i] = elem.style[i];
elem.style[i] = prop[i];
}
return old;
}
function restoreCSS(elem,prop){
for(var i in prop){
elem.style[i] = prop[i];
}
}
//使用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;
}
}

Javascript 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
jQuery基本过滤选择器使用介绍
Apr 18 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
javascript实现九宫格相加数值相等
May 28 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 #Javascript
JS Array对象入门分析
Oct 30 #Javascript
ajaxControlToolkit AutoCompleteExtender的用法
Oct 30 #Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
Oct 29 #Javascript
关于B/S判断浏览器断开的问题讨论
Oct 29 #Javascript
JS写的数字拼图小游戏代码[学习参考]
Oct 29 #Javascript
JavaScript函数、方法、对象代码
Oct 29 #Javascript
You might like
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
PHP 文件上传全攻略
2010/04/28 PHP
字母顺序颠倒而单词顺序不变的php代码
2010/08/08 PHP
使用php清除bom示例
2014/03/03 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
js实现交通灯效果
2017/01/13 Javascript
js微信分享实现代码
2020/10/11 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
python爬虫使用cookie登录详解
2017/12/27 Python
python基于递归解决背包问题详解
2019/07/03 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
经销商培训邀请函
2014/01/21 职场文书
cf收人广告词大全
2014/03/14 职场文书
教育基金募捐倡议书
2014/05/14 职场文书
毕业生应聘求职信
2014/07/10 职场文书
谢师宴邀请函
2015/02/02 职场文书
教师读书活动心得体会
2016/01/14 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS
详解JAVA的控制语句
2021/11/11 Java/Android