Mozilla 한국 커뮤니티

getElementById를 사용해서 script를 작성하려고 하는데요.

예를 들어서 아래의 코드와 같이

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">

</script>
</head>
<body>
<div id="div_1" style="width:200px;height:150px;border:1px solid gray;"></div>
<button type="button" onclick="bg1('div_1', 'backgroundColor', 'gray');">배경색 바꾸기</button>
<br />
<div id="div_2" style="width:200px;height:150px;border:1px solid gray;"></div>
<button type="button" onclick="bg2('div_2', 'gray');">배경색 바꾸기</button>
</body>
</html>

이렇게 만들었을 경우 chg_bg2는 실행이 되는데 chg_bg1은 실행이 안되는 군요.

왜 그러냐 하면 bg1과 같이 만들어서 CSS 속성을 바꾸고 싶은 모든 곳에 재 사용하려고 하는데 bg2와 같이 만들면 background-color 이외의 css 속성을 바꾸지 못 하게 되는데

제가 뭘 잘 못해서 그런지 모르겠습니다.

bg1 처럼 만들어서 모든 css 속성을 바꿀 수 있게 하여 function을 재 사용하는 방법이 뭐 없을까요? 고수님의 고견을 부탁드립니다.

function bg1(obj, prop, pvalue){
document.getElementById(obj).style[prop] = pvalue;
}

이렇게 하시면 됩니다.

그런 방법도 있군요. 처음 알았습니다.

무슨 수가 있기는 분명히 있을 것 같다고 추측했는데 전혀 생각지 못한 방법이네요.

제가 문서에 대 부분을 id.style.cssPropertyName 식으로 script를 만들어 놓고 앞에 이 것 들을 getElementById로 바꾸려고 하니 엄두가 안나서요... 그냥 무식하게 일일히 바꾸려고도 했는데, 질문 드리길 정말 잘 했습니다. 역시 모르면 물어 보라는 말이 옳군요.

감사합니다. 덕분에 어려운 문제 하나를 해결했네요.

Mozilla 한국 커뮤니티

document.all 대신에 getEleme

document.all 대신에 getEleme

감사합니다. hyeonseok 님