js CSS操作方法集合
更新時間:2008年10月31日 23:35:02 作者:
用js實現(xiàn)的對css的一些操作方法,集合,方便需要用js控制css的朋友
//獲取元素的真實的,最終的CSS樣式屬性值的函數(shù)
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;
}
//確定元素相對于父親的位置的兩個函數(shù)
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"));
}
//設(shè)置元素x和y位置(與當前位置無關(guān))的函數(shù)
function setX(elem,pos){
elem.style.left = pos+"px";
}
function setY(elem,pos){
elem.style.top = pos+"px";
}
//調(diào)整元素相對于當前位置的距離的函數(shù)
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'));
}
//即是元素隱藏,也能分別獲取它潛在的完整高度和寬度的兩個函數(shù)
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屬性來切換元素可見性的一組函數(shù)
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 ||'';
}
//設(shè)置元素的透明度
function setOpacity(elem,level){
if(elem.filters){
elem.style.filters = 'alpha(opacity='+level+')';
}else{
elem.style.opacity = level/100;
}
}
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;
}
//確定元素相對于父親的位置的兩個函數(shù)
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"));
}
//設(shè)置元素x和y位置(與當前位置無關(guān))的函數(shù)
function setX(elem,pos){
elem.style.left = pos+"px";
}
function setY(elem,pos){
elem.style.top = pos+"px";
}
//調(diào)整元素相對于當前位置的距離的函數(shù)
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'));
}
//即是元素隱藏,也能分別獲取它潛在的完整高度和寬度的兩個函數(shù)
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屬性來切換元素可見性的一組函數(shù)
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 ||'';
}
//設(shè)置元素的透明度
function setOpacity(elem,level){
if(elem.filters){
elem.style.filters = 'alpha(opacity='+level+')';
}else{
elem.style.opacity = level/100;
}
}
相關(guān)文章
javascript replace()正則替換實現(xiàn)代碼
javascript-replace()基礎(chǔ),一次完成將"<,>"替換"<>"實例2010-02-02
小程序封裝wx.request請求并創(chuàng)建接口管理文件的實現(xiàn)
這篇文章主要介紹了小程序封裝wx.request請求并創(chuàng)建接口管理文件2019-04-04
Uni-app返回上一頁面并攜帶參數(shù)的實現(xiàn)方法
這篇文章主要介紹了Uni-app返回上一頁面并攜帶參數(shù)的實現(xiàn)方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-06-06
淺析基于WEB前端頁面的頁面內(nèi)容搜索的實現(xiàn)思路
本文主要是想實現(xiàn)瀏覽器的CTRL+F功能,提供個思路和代碼,需要的朋友可以參考下2014-06-06
echarts幾個公司內(nèi)部數(shù)據(jù)可視化圖表必收藏
最近公司有一個需求,要做一個數(shù)據(jù)可視化的頁面,所有的圖表都在下面,做這些都是本人自己寫的,全部都是真是的項目中的代碼,包含有柱狀圖、折線圖、水球圖以及散點圖,這里直接打出來給大家練手,希望大家多多支持,如果這篇文章對您有用的話必須收藏2022-08-08
一文徹底理解js原生語法prototype,__proto__和constructor
作為一名前端工程師,必須搞懂JS中的prototype、__proto__與constructor屬性,相信很多初學者對這些屬性存在許多困惑,容易把它們混淆,下面這篇文章主要給大家介紹了關(guān)于js原生語法prototype,__proto__和constructor的相關(guān)資料,需要的朋友可以參考下2021-10-10

