2010-01-19 15 views
7

JavaScript를 사용하고 있지 않습니다. JavaScript를 사용하여 페이지를 개발했습니다. 색상을 선택하면 전체 페이지에 배경으로 적용됩니다.텍스트 색상 변경 onclick

텍스트 색상 만 변경할 수있는 페이지를 만들고 싶습니다. 그것은 (빨간색에서 녹색 또는 그와 비슷한) 변경해야하지만, 페이지가 새로 고쳐져서는 안되며 선택한 내용이나 텍스트 색상 만 변경해야합니다.

누구든지이 문제에 대해 도움이 될 수 있습니까? 그것을 개발하는 방법에 대한 아이디어가 있습니까? 미리 감사드립니다.

답변

4

Sarfraz에 의한 대답의 재 작성이 같은 것을 나는 생각한다

<script> 

    document.getElementById('change').onclick = changeColor; 

    function changeColor() { 
     document.body.style.color = "purple"; 
     return false; 
    } 

</script> 

당신은에서이 스크립트를 넣어야 할 것 중 하나 페이지의 맨 아래, 닫는 body 태그 바로 앞에 또는 처리기 할당을 onload라는 함수에 넣으십시오. 그렇지 않으면 jQuery를 사용하는 경우 매우 우아합니다. $(document).ready(function() { ... });

이 방법으로 이벤트 처리기를 할당하면 HTML에서 기능을 사용할 수 있습니다. 또한 함수 이름 - no()와 동일하게 설정합니다. onclick = myFunc();을 수행하면 핸들러가 설정 될 때 함수가 실제로 실행됩니다.

그리고 궁금합니다. 배경색은 변경하지만 텍스트 색상은 변경하지 않아도됩니다. 이상한 :)

+0

중량 메신저 텍스트 색상을 변화하려고 노력 작동 할 수 페이지를 ..하지만 내가 클릭 한 첫 번째 .css 페이지를 표시하지만 다른 사람을 표시합니다. 나는 세. CSS 파일도 호출했습니다. – Patel

+0

@patel 그것은 원래 질문에 포함하는 것이 매우 유용합니다. 중요한 작은 비트를 포함하도록 편집해야합니다. –

4

는 다음과 같이 수행

<script> 
function changeColor(id) 
{ 
    document.getElementById(id).style.color = "#ff0000"; // forecolor 
    document.getElementById(id).style.backgroundColor = "#ff0000"; // backcolor 
} 
</script> 

<div id="myid">Hello There !!</div> 

<a href="#" onclick="changeColor('myid'); return false;">Change Color</a> 
+0

-1'document.getElementById (id)'의 비효율적 인 사용과 문제가있는 이벤트 등록 –

+0

@Justin : 비효율적 인 것을 설명 할 수 있다면 좋을까요? 내가 배울 수 있다면 좋을 것이다. 당신이 제공 할 수있는 링크는 무엇입니까? – Sarfraz

+0

DOM을 가능한 멀리 걷는 것이 가장 좋습니다. 그래서'document.getElementById'와 같은 메소드를 가능한 한 적게 호출하고 싶을 것입니다. 이벤트 등록은 일반적으로 프레젠테이션과 로직을 혼합하는 나쁜 형식으로 간주됩니다. 자세한 내용은 여기에서 읽을 수 있습니다 : http://www.quirksmode.org/js/events_early.html –