CSS 조작 함수
Javascript 2012. 4. 16. 23:14
CSS 조작 함수
지난 포스트에 이어 attr() 함수와 비슷한 구조로 해당 엘리먼트의 style 값을 조작하는 기능을 작성해 보았습니다.
작성된 함수는 아래와 같습니다.
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<HEAD>
-
<META NAME="Generator" CONTENT="EditPlus">
-
<META NAME="Author" CONTENT="">
-
<META NAME="Keywords" CONTENT="">
-
<META NAME="Description" CONTENT="">
-
</HEAD>
-
<BODY style="margin:0;padding:0;">
-
<script type="text/javascript">
-
//<![CDATA[
-
-
var Element = (function(win, doc){
-
-
return new (function(){
-
-
function init(){
-
-
return this;
-
}
-
-
init.prototype = {
-
css: css
-
};
-
-
-
return init;
-
-
}());
-
-
// 속성 가져오기/변경하기
-
function css(elem, args, value)
-
{
-
elem = elem || top.document.documentElement;
-
args = args || (args && args.constructor === Object ? {} : '');
-
value = value || '';
-
-
if (args.constructor === Object){
-
-
for (var n in args){
-
elem.style[n] = args[n];
-
}
-
-
return elem;
-
}
-
else if (args.constructor === String){
-
-
if (value)
-
{
-
elem.style[args] = value;
-
-
return elem;
-
}
-
else
-
{
-
if (top.document.defaultView && top.document.defaultView.getComputedStyle){
-
// element 의 스타일 객체를 생성한다.
-
var style = top.document.defaultView.getComputedStyle(elem, '');
-
// style 객체의 getPropertyValue는 textAlign이 아닌 text-align 과 같은 속성 이름으로 값을 가져온다.
-
return style && style.getPropertyValue(args.replace(/([A-Z])/g, '-$1').toLowerCase());
-
}
-
else if (elem.style[args]){
-
return elem.style[args];
-
}
-
else if (elem.currentStyle){
-
return elem.currentStyle[args];
-
}
-
}
-
}
-
};
-
-
}(window, document));
-
-
-
window.onload = function()
-
{
-
var elem = document.getElementsByTagName('div')[0];
-
-
// 해당 엘리먼트에 style 설정
-
Element.css(elem, {
-
position:'absolute',
-
color:'red',
-
textAlign:'center'
-
});
-
-
// position 설정을 변경한다.
-
Element.css(elem, 'position', 'relative');
-
-
// 정의된 position 값을 가져온다.
-
alert(Element.css(elem, 'position')); // relative
-
-
};
-
-
-
//]]>
-
</script>
-
<div id="root_offset1" style="position:relative;top:100px;left:100px;width:2000px;height:2200px;">dada
-
<div>
-
<div>
-
</BODY>
-
</HTML>
- if (top.document.defaultView && top.document.defaultView.getComputedStyle){
-
// element 의 스타일 객체를 생성한다.
-
var style = top.document.defaultView.getComputedStyle(elem, '');
-
// style 객체의 getPropertyValue는 textAlign이 아닌 text-align 과 같은 속성 이름으로 값을 가져온다.
-
return style && style.getPropertyValue(args.replace(/([A-Z])/g, '-$1').toLowerCase());
-
}
위 코드는 파이어폭스 브라우저만을 위한 코드이며, 해당 엘리먼트의 스타일 객체를 생성하여 그에 따른 스타일 속성값을 가져오는 코드입니다.
또한, 속성값을 가져오기 위한 getPropertyValue() 함수의 첫 번째 매개변수로 속성 이름을 전달하는데,
전달 시 속성 이름을 text-align과 같은 형태로 전달하기 위해 정규식을 활용하여 전달받은 문자열을 대체시켰습니다.
