js 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;
}
}
//兩個(gè)確定元素相對(duì)于整個(gè)文檔的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;
}
//確定元素相對(duì)于父親的位置的兩個(gè)函數(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);
}
//確定元素相對(duì)于它的CSS容器的位置
function posX(elem){
return parseInt(getStyle(elem,"left"));
}
function posY(elem){
return parseInt(getStyle(elem,"top"));
}
//設(shè)置元素x和y位置(與當(dāng)前位置無(wú)關(guān))的函數(shù)
function setX(elem,pos){
elem.style.left = pos+"px";
}
function setY(elem,pos){
elem.style.top = pos+"px";
}
//調(diào)整元素相對(duì)于當(dāng)前位置的距離的函數(shù)
function addX(elem,pos){
setX(posX(elem)+pos);
}
function addY(elem,pos){
setY(posY(elem)+pos);
}
//獲取元素當(dāng)前的高度和寬度
function getHeight(elem){
return parseInt(getStyle(elem,'height'));
}
function getWidth(elem){
return parseInt(getStyle(elem,'width'));
}
//即是元素隱藏,也能分別獲取它潛在的完整高度和寬度的兩個(gè)函數(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屬性來(lái)切換元素可見(jiàn)性的一組函數(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;
}
}
- js與css實(shí)現(xiàn)彈出層覆蓋整個(gè)頁(yè)面的方法
- JS判斷瀏覽器是否支持某一個(gè)CSS3屬性的方法
- jquery動(dòng)態(tài)加載js/css文件方法(自寫(xiě)小函數(shù))
- js 動(dòng)態(tài)修改css文件的方法
- JS使用getComputedStyle()方法獲取CSS屬性值
- jsp頁(yè)面中插入css樣式的三種方法總結(jié)
- javascript預(yù)加載圖片、css、js的方法示例介紹
- js 獲取和設(shè)置css3 屬性值的實(shí)現(xiàn)方法
- 把JS與CSS寫(xiě)在同一個(gè)文件里的書(shū)寫(xiě)方法
- JS+CSS實(shí)現(xiàn)彈出全屏灰黑色透明遮罩效果的方法
相關(guān)文章
javascript replace()正則替換實(shí)現(xiàn)代碼
javascript-replace()基礎(chǔ),一次完成將"<,>"替換"<>"實(shí)例2010-02-02小程序封裝wx.request請(qǐng)求并創(chuàng)建接口管理文件的實(shí)現(xiàn)
這篇文章主要介紹了小程序封裝wx.request請(qǐng)求并創(chuàng)建接口管理文件2019-04-04Uni-app返回上一頁(yè)面并攜帶參數(shù)的實(shí)現(xiàn)方法
這篇文章主要介紹了Uni-app返回上一頁(yè)面并攜帶參數(shù)的實(shí)現(xiàn)方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06淺析基于WEB前端頁(yè)面的頁(yè)面內(nèi)容搜索的實(shí)現(xiàn)思路
本文主要是想實(shí)現(xiàn)瀏覽器的CTRL+F功能,提供個(gè)思路和代碼,需要的朋友可以參考下2014-06-06JS的Ajax與后端交互數(shù)據(jù)的實(shí)例
今天小編就為大家分享一篇JS的Ajax與后端交互數(shù)據(jù)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08echarts幾個(gè)公司內(nèi)部數(shù)據(jù)可視化圖表必收藏
最近公司有一個(gè)需求,要做一個(gè)數(shù)據(jù)可視化的頁(yè)面,所有的圖表都在下面,做這些都是本人自己寫(xiě)的,全部都是真是的項(xiàng)目中的代碼,包含有柱狀圖、折線(xiàn)圖、水球圖以及散點(diǎn)圖,這里直接打出來(lái)給大家練手,希望大家多多支持,如果這篇文章對(duì)您有用的話(huà)必須收藏2022-08-08Three.js利用dat.GUI如何簡(jiǎn)化試驗(yàn)流程詳解
dat.gui可以方便地向場(chǎng)景中添加控制條,隨時(shí)調(diào)整參數(shù)。下面這篇文章主要給大家介紹了關(guān)于Three.js利用dat.GUI如何簡(jiǎn)化試驗(yàn)流程的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-09-09一文徹底理解js原生語(yǔ)法prototype,__proto__和constructor
作為一名前端工程師,必須搞懂JS中的prototype、__proto__與constructor屬性,相信很多初學(xué)者對(duì)這些屬性存在許多困惑,容易把它們混淆,下面這篇文章主要給大家介紹了關(guān)于js原生語(yǔ)法prototype,__proto__和constructor的相關(guān)資料,需要的朋友可以參考下2021-10-10