> 웹 프론트엔드 > JS 튜토리얼 > js CSS 작업 방법 collection_javascript 기술

js CSS 작업 방법 collection_javascript 기술

WBOY
풀어 주다: 2016-05-16 18:59:10
원래의
987명이 탐색했습니다.

//요소의 실제 최종 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.getCompulatedStyle){
name = name.replace (/([A-Z])/g,"-$1");
name = name.toLowerCase();

var s = document.defaultView.getCompulatedStyle(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 parsInt(getStyle(elem,"left"))
}
function posY(elem){
return parsInt(getStyle(elem, "top"))
}
//현재 위치와 관계없이 요소의 x 및 y 위치를 설정하는 함수 )
함수 setX( elem,pos){
elem.style.left = pos "px"
}
함수 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){
returnparseInt(getStyle(elem,'height'))
}
function getWidth(elem){
returnparseInt(getStyle(elem,'width') );
}
//요소를 숨기고 잠재적인 전체 높이와 너비를 각각 얻는 두 가지 함수입니다.
function fullHeight(elem){
if(getStyle(elem,'display') !='none'){
return elem.offsetHeight||getHeight(elem);
}
var old = ResetCSS(elem,{
display:'',
visibility:' 숨겨진',
위치:' 절대'
});
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,{
표시:'',
가시성:'숨김',
위치:'절대'
})
var w = elem.clientWidth || getWidth(elem );
restoreCSS(elem,old);
return w;

function ResetCSS(elem,prop){
= [];
for( var i in prop){
old[i] = elem.style[i]
elem.style[i] =
}
return old;
}
function RestoreCSS(elem,prop){
for(var i in prop){
elem.style[i] = prop[i]
}
}
// CSS의 표시 속성을 사용하여 요소의 가시성을 전환하는 함수 집합
function hide(elem){
var curDisplay = getStyle(elem,'display');
if(curDisplay != 'none') {
elem.$oldDisplay= curDisplay;
}
elem.style.display = 'none'
}
함수 표시( 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; 🎜>}
}

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿