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 相关文章推荐
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
易被忽视的js事件问题总结
May 14 Javascript
第五篇Bootstrap 排版
Jun 21 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
js中的 || 与 && 运算符详解
May 24 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
vue开发简单上传图片功能
Jun 30 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 Javascript
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 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
进一步理解Python中的函数编程
2015/04/13 Python
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
python实现桌面气泡提示功能
2019/07/29 Python
Python Django 命名空间模式的实现
2019/08/09 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
应届生的求职推荐信范文
2013/11/30 职场文书
初中体育教学反思
2014/01/14 职场文书
党章学习思想汇报
2014/01/14 职场文书
致共产党员倡议书
2014/04/16 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
怎样写观后感
2015/06/19 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS
java实现面板之间切换功能
2022/06/10 Java/Android