클라이언트 측에서 자바스크립트로 HTML div
요소의 ID를 수정하고 있습니다. 다음 코드는 인터넷 익스플로러에서는 정상적으로 작동하지만 파이어폭스 2.0.0.20에서는 작동하지 않습니다. 최신 버전의 Firefox에서는 작동합니다.
document.getElementById('one').id = 'two';
누구든지 알려주세요:
명확히 하기 위해 외부 스타일 시트에서 다른 스타일을 참조하도록 요소 ID를 변경하고 있습니다. 이 스타일은 IE에서는 적용되지만 FF에서는 적용되지 않습니다.
Firefox(2.0.0.20` 포함)에서 작동합니다. http://jsbin.com/akili 참조(수정할 URL에 /edit
추가):
<p id="one">One</p>
<a href="#" onclick="document.getElementById('one').id = 'two'; return false">Link2</a>
첫 번째 클릭은 id
를 2
로 변경하고, 두 번째 클릭은 `id=1
의 요소를 찾을 수 없기 때문에 오류가 발생합니다!
아마도 id="two"
를 가진 다른 요소가 이미 있을 수 있습니다(참고로 동일한 id
를 가진 요소를 두 개 이상 가질 수 없습니다).
저에게는 잘 맞는 것 같습니다:
<html>
<head><style>
#monkey {color:blue}
#ape {color:purple}
</style></head>
<body>
<span id="monkey" onclick="changeid()">
fruit
</span>
<script>
function changeid ()
{
var e = document.getElementById("monkey");
e.id = "ape";
}
</script>
</body>
</html>
예상되는 동작은 '과일'이라는 단어의 색상을 변경하는 것입니다.
루틴을 호출할 때 문서가 완전히 로드되지 않았을 수 있나요?
getElementById를 사용하지 않고도
id`를 수정할 수 있습니다.
예시:
<div id = 'One' onclick = "One.id = 'Two'; return false;">One</div>
여기에서 볼 수 있습니다: http://jsbin.com/elikaj/1/
Mozilla Firefox 22 및 Google Chrome 60.0에서 테스트되었습니다.