`
raozhiyong11
  • 浏览: 138950 次
  • 性别: Icon_minigender_1
  • 来自: 江西
社区版块
存档分类
最新评论

用js实现的对css的一些操作方法,集合,方便需要用js控制css的朋友

阅读更多

引自: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和cssAPI集合

    JavaScript(简称JS)和CSS(层叠样式表)是网页开发中的两大核心技术。它们共同决定了网页的动态功能和视觉呈现。API(Application Programming Interface)在JS和CSS中扮演着重要角色,提供了丰富的功能和交互性。...

    div CSS+JS特效大集合(网络收集)

    总之,“div CSS+JS特效大集合(网络收集)”是一份宝贵的参考资料,它揭示了如何巧妙地结合div、CSS和JavaScript,打造引人入胜的网页效果。无论你是初学者还是经验丰富的开发者,都能从中受益匪浅,进一步提升你的...

    js+css控件

    在IT领域,JavaScript(简称JS)和CSS是创建交互式网页和美观用户界面不可或缺的工具。这个名为"js+css控件"的压缩包显然提供了一个时间控件,旨在帮助开发者轻松实现用户友好的时间选择功能。让我们深入探讨一下这...

    javascript+css+正则表达式

    这份"javascript+css+正则表达式"的chm帮助文档集合,为初学者提供了全面的学习资源,涵盖了这些主题的基础知识和进阶技巧。 首先,JavaScript作为前端开发的核心语言,它的基础教程会介绍变量、数据类型、控制流程...

    css+js图片特效集合

    本资源包“css+js图片特效集合”汇聚了多种JavaScript实现的图片特效,为网页设计师和开发者提供了丰富的灵感和实践素材。 首先,我们来探讨CSS在图片特效中的应用。CSS3引入了许多新的属性和选择器,使得创建复杂...

    一些用js实现的特效

    不同浏览器对JavaScript和CSS的支持程度不同,需要进行兼容性检查和处理。例如,使用polyfill库填充旧浏览器缺失的功能,或者使用`Modernizr`检测浏览器特性。 10. **最佳实践** 在编写特效时,遵循模块化、可...

    js CSS操作方法集合

    这个“js CSS操作方法集合”提供了一系列实用的函数,帮助开发者更方便地处理这类任务。以下是对这些方法的详细解释: 1. `getStyle(elem, name)`:这个函数用于获取元素的最终CSS样式属性值。它首先尝试访问`elem....

    js+css+jquery资源合集(共9个文件)

    在前端开发领域,JavaScript、CSS和jQuery是至关重要的技术组件,它们共同构建了现代网页的交互性和视觉效果。本资源合集包含九个文件,涵盖了这些核心技术,为开发者提供了丰富的学习和实践素材。 首先,...

    微信div切换样式所需的js和css库

    在微信div切换样式的开发中,常常需要借助JavaScript和CSS库来实现动态的交互效果。本资源提供的就是一套专门用于这一目的的库,包括`example.css`,`zepto.min.js`以及`example.js`这三个关键文件。 首先,`...

    DHTML + CSS + JavaScript 实用手册

    《DHTML + CSS + JavaScript 实用手册》是一本详尽阐述网页制作技术的综合资源,包含三大部分:DHTML完全手册、CSS滤镜手册和JavaScript语言参考手册。这些手册为网页设计师和开发者提供了全面的指导,帮助他们创建...

    html+css+js实现的多款图片照版切换、翻转、滑动展示效果源码

    例如,可以使用JavaScript的`addEventListener`方法监听用户事件,`DOM操作`如`appendChild`或`removeChild`来改变页面上的图片,或者使用`requestAnimationFrame`实现流畅的动画效果。 在“照片旋转滑动展示(css+...

    最全Web开发资料大集合:ajax实战 CSS DOM HTML xml手册 JS宝典

    CSS可以控制字体、颜色、布局等视觉效果,并支持媒体查询,实现响应式设计。 **JavaScript**: JavaScript是一种广泛使用的脚本语言,主要用于网页和网络应用的客户端编程。它可以处理用户交互、操作DOM、执行异步...

    本人收集的近50种伸缩滑动折叠菜单(js、css、div实现)

    5. 不同菜单实现方式:这近50种菜单可能包含了多种实现思路,比如基于纯CSS的菜单,使用JavaScript库(如jQuery)的菜单,以及运用现代框架(如React、Vue、Angular)的组件化菜单。每种实现都有其优缺点,可以根据...

    css、js、asp.net知识小集合

    在CSS中,font属性可以简写为font: [style] [variant] [weight] [size] [/lineheight] [fontfamily],使用该简写方法可以方便地设置字体样式、大小、粗细、行高及字体族等属性。 4. CSS行高line-height介绍 line-...

    css,javascript等一些好的网页特效制作方法和技巧集合

    - **DOM操作**:了解如何通过JavaScript选取、添加、删除和修改DOM元素,以实现动态内容更新。 - **事件处理**:绑定和解绑事件监听器,如`click`, `mouseover`, `mouseout`等,以响应用户交互。 - **动画框架**...

    带缩略图及描述的js+css图片轮播

    它结合了JavaScript(js)和CSS(层叠样式表)技术,使得图片能够以吸引人的方式自动或手动进行切换,并且带有缩略图导航,用户可以方便地浏览全部图片。 【描述】提到的效果是网页设计中的一个经典元素,简洁大方...

    css,DHTML,JavaScript帮助文档大全

    通过使用CSS,开发者可以实现精确的页面布局控制,创建响应式设计,并优化网页性能。 **DHTML(动态超文本标记语言)**: DHTML是一种集合概念,它包含了HTML、CSS、JavaScript和DOM(Document Object Model)等...

    js脚本大集合(JavaScript)

    这个“js脚本大集合”显然是一份包含多种JavaScript特效和功能实现的资源包,适合初学者学习和开发者参考。 1. **基础概念**: - JavaScript主要由ECMAScript规范定义,是网景公司的Brendan Eich在1995年发明的。 ...

    用HTML5CSS3实现媲美原生应用的交互体验_尤雨溪

    CSS3 transform属性允许对元素进行旋转、缩放、移动或倾斜操作。常用函数包括: - `rotate(ndeg)`:按指定度数旋转元素。 - `translate(xpx, ypx)`:沿水平和垂直方向移动元素。 - `scale(n)`:缩放元素大小。 - `...

    html CSS javascript 使用手册

    《HTML CSS JavaScript 使用手册》是一份综合性的技术文档集合,旨在帮助开发者全面理解和掌握Web前端开发的核心技术。手册包括三个主要部分:DHTML手册、JScript手册和dhtmlet_css2手册,涵盖了HTML标记语言、CSS...

Global site tag (gtag.js) - Google Analytics