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 相关文章推荐
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
React中ES5与ES6写法的区别总结
Apr 21 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
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
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
PHP入门学习笔记之一
2010/10/12 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
php简单复制文件的方法
2016/05/09 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
python新手经常遇到的17个错误分析
2014/07/30 Python
python通过文件头判断文件类型
2015/10/30 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
python制作填词游戏步骤详解
2019/05/05 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
销售员个人求职的自我评价
2014/02/10 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
个园导游词
2015/02/04 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
倡议书怎么写?
2019/04/11 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL