// 테이블 사이즈 제어 :: 익스플로러에서는 TABLE에 NAME 속성이 안먹는 관계로 파이어폭스에서만 동작함, 아래 함수보다 훨씬 느림.
function changeWidth_NN(name, size1, size2) {
var intDefaultSize = parseInt(size1);
var intSize = parseInt(size2);
var intPresentSize;
var intNewSize;
var i;

for(i=0; i<document.getElementsByName(name).length; i++) { // 페이지에 name값과 일치하는 객체의 개수만큼 루프 돌림
intPresentSize = parseInt(document.getElementsByName(name)[i].style.width); // 해당 배열 객체의 style의 width 값을 불러들임
if(size2 == 'default') {
intNewSize = intDefaultSize;
}
else if(size2 != 'default') {
intNewSize = intPresentSize + intSize;
if(intNewSize < intDefaultSize) {
intNewSize = intDefaultSize;
}
}
document.getElementsByName(name)[i].style.width = intNewSize; // 새로 계산된 치수를 해당 배열 객체에 입력
}
}

// 테이블 사이즈 제어 :: 익스플로러 & 파이어폭스에서 동작함 (역시 느리지만 위에 놈보다는 약간 빠름. -0-)
function changeWidth_All(name, size1, size2) {
var obj = document.getElementsByTagName('table'); // 페이지에서 table 객체를 구함
var intDefaultSize = parseInt(size1);
var intSize = parseInt(size2);
var intPresentSize;
var intNewSize;
var i;

for(i=0; i<obj.length; i++) { // table 객체의 개수만큼 루프 돌림
if(obj[i].getAttribute('id') == name) { // table 객체들 중에 id가 함수에 들어온 name값과 일치하면
intPresentSize = parseInt(obj[i].style.width); // 해당 배열 객체의 style중 width 값을 불러들임
if(size2 == 'default') {
intNewSize = intDefaultSize;
}
else if(size2 != 'default') {
intNewSize = intPresentSize + intSize;
if(intNewSize < intDefaultSize) {
intNewSize = intDefaultSize;
}
}
obj[i].style.width = intNewSize; // 새로 계산된 치수를 해당 배열 객체에 입력
}
}
}

새로 만드는 홈피에 쓰려고 만들었습니다. 주 목적은 집크기를 조절하는 용도이나 여러가지 방면으로 쓰일 수 있습니다.

첫번째 함수는 모질라 계열에 신경쓰면서 만들어서 파이어폭스로만 테스트 하면서 만들었는데 익스에서는 동작하지 않더라는.. 30분 넘게 고심하면서 이것저것 해보면서 알아낸건데

익스에서는 table 태그에 있는 name 값을 무시하더군요. 모질라는 비표준임에도 불구하고 table 태그에 있는 name 값을 인식합니다. +_+;;

두번째 함수는 모질라에서만 되던 놈을 익스에도 되게 하기 위해서 생각해낸 놈입니다.

만약 테이블이 아닌 INPUT 객체를 제어하고자 한다면 첫번째 함수도 불여우와 익스 두 곳에서 다 사용할 수 있습니다.

위와 같은 놈을 만들게 된 이유는 한꺼번에 여러 객체를 동시에 제어하기 위함입니다.

링크된 예제와 소스를 보시면 이해되실듯 ^^

이걸 만들면서 알게 된 사실인데 모질라는 객체의 name값과 id값을 엄격하게 구별하는 것에 반해 익스플로러는 name 값과 id 값을 구별하지 않는다는 것을 알게 되었답니다.

이 것 또한 링크된 예제 파일을 실행해 보시면 알게되실 겁니다.

험... 머리 속에는 뭔가가 막 맴도는데 표현이 안되네요. ㅜ.ㅜ 역시 글을 쓰는 것은 힘이드나 봅니다.

function changeSize(name, size1, size2, mode) {
var obj = document.getElementById(name);
var intDefaultSize = size1;
var intPresentSize = parseInt(obj.width);
var intNewSize = parseInt(size2);

if(mode == '0') {
obj.width = intDefaultSize;
} else if(mode=='+') {
obj.width = intPresentSize + intNewSize;
} else if(mode=='-') {
if((intPresentSize - intNewSize) <= intDefaultSize) {
obj.width = intDefaultSize;
} else {
obj.width = intPresentSize - intNewSize;
}
}
}

위에 놈은 한 1년 반(?) 전에 만들어 쓴 놈인데 이 놈의 한계가 테이블 하나 밖에 제어를 못합니다.

예를 들어 id가 같은 테이블이 아래와 같이 여러개 있다면...
<table id=example width=100>.....</table>
<table id=example width=100>.....</table>
<table id=example width=100>.....</table>
<table id=example width=100>.....</table>

<a .... onClick=changeSize('example',100,10,'+')>...</a> 로는 제일 상위 테이블만 제어할 수 있습니다.

위 테이블에 id=example 대신 name=example로 바꾸고 changeWidth_NN(....)를 사용하면 파이어폭스에서는 모두 제어가능하나 익스에선 안되지요.

그래서 id=example 값은 그대로 두고 changeWidth_All(.....)을 사용하면 동일 id 값의 테이블 모두를 제어할 수 있는 것입니다. 대신 changeWidth_All의 경우 width는 스타일로 먹여야됩니다. 아님 obj[i].style.width 대신에 obj[i].width로 바꾸고 attribute로 width를 넣어주면 되겠지요.

ㅜ.ㅜ 제가 생각해도 설명 너무 못하네요. 하긴 제가 정식으로 배우거나 공부한게 아니라서 잘 모르기에 더욱 그런지도 모르겠네요.

수능만 치고 나면!!!!! 실력을 갈고 닦아 제대로 플밍함 공부해 봐야겠습니다.

참. 같은 배열이지만 익스용인 document.all[...] 보다는 DOM표준인 document.getElementsByName(...) 을 사용합시다~

P.S. 수능 성적 잘 나오도록 기도해주세요 ㅎㅎㅎㅎ 공부는 안하고 -_-;; 이런거 하고 놀고 있습니다. 내가 미쳐 ㅜ.ㅜ 공부해야지.
P.P.S. 제가 만든 허접 소스이지만 사용해 주신다면 영광으로 삼겠습니다. 참고로 제어하는 오브젝트가 많아질 경우 무지 느립니다. 한 300개 정도 동시에 움직여 봤는데 컴이 딸려서 그런지 1 ~ 2초 걸리더군요. -0-;; 좋은 놈 만드시면 저 좀 주세요~<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]</div>