내 텍스트를 강조 표시하는 방법

텍스트와 버튼이 있습니다. 사용자가 버튼을 클릭하면 텍스트 배경이 녹색으로 변경되고 뒤로 돌아갑니다. 내가 버튼을 클릭하면 그러나 아무것도 내 텍스트를 강조 표시하는 방법

가 여기에 JS 스크립트의 ... 발생하지 :

<script> 
function bright(){ 
    kontakt = document.getElementById('kontakt'); 
    kontakt.bgcolor = '#A5DF00'; 
} 
function dark(){ 
    kontakt = document.getElementById('kontakt'); 
    kontakt.bgcolor = '#000000'; 
} 
function highlight(){  
    setTimeout(bright() , 1000); 
    setTimeout(dark() , 1000); 
} 
</script>

나는 다음과 같이 버튼의 OnClick 속성에서 강조 표시()를 호출 : onclick='highlight()'.

id가 kontakt 인 텍스트는 항상 페이지에 있습니다.

단서가 있습니까?

출처

2014-03-25 grizeldi

함수를 즉시 호출하고 반환 값을'setTimeout' 콜백에 할당한다는 사실 ('()'을 제거하기 위해)'bright()'와'dark()'동시에 ... 당신은 무엇을 기대 했습니까? –

두 함수의 실행 사이에 시간을 추가하는 방법은 무엇입니까? – grizeldi

동시에 실행하지 마십시오? –

코드에 따르면 highlight()을 호출하면 1 초 동안 기다린 다음 배경이 녹색으로 바뀌고 즉시 검은 색으로 최대한 빨리 회전합니다. 브라우저가 렌더링되거나 눈이 감지 할 수있는 속도보다 빠르기 때문에 초록색으로 깜박 거리지 않는다고 생각합니다.

setTimeout(dark , 1000);을 setTimeout(dark , 1500);으로 변경하십시오.

출처

2014-03-25 17:35:36 potterbm

'()'을 제거하십시오. 그렇지 않으면 함수가 즉시 호출되고 해당 반환 값이 시간 초과 콜백으로 사용됩니다. –

오, 잘 부탁드립니다. 방금 복사 한 내용을 붙여 넣었습니다. – potterbm

이것은 하나 작동합니다. – grizeldi

하는 CSS 속성은 스타일 속성을 통해 액세스 할 수 있습니다 :

var kontakt = document.getElementById('kontakt'); 
function bright(){ 
    kontakt.style.backgroundColor = '#A5DF00'; 
} 
function dark(){ 
    kontakt.style.backgroundColor = '#000000'; 
}

모든 CSS 속성은 같은 방법으로 액세스 할 수 있습니다. 속성에 대시가있는 경우 z-index 그냥 낙타의 경우 표기법을 사용하십시오.

예 : kontakt.style.zIndex

당신은 다음처럼의 setTimeout를 업데이트해야합니다 : 귀하의 경우

function highlight(){  
    setTimeout(bright , 1000); 
    setTimeout(dark , 2000); 
}

당신이 함수를 호출하고 그들이에서는 setTimeout으로 돌아가 무엇이든 통과했다. 또한 첫 번째 기능이 1 초 후에 발생하도록 타이머를 변경하고 다음 타이머가 1 초 후에 변경되도록하려고합니다.

출처

2014-03-25 17:34:15 Ibu

jsfiddle 예 here이 SO answer을 기준으로 수정되었습니다.

<span id='kontakt' onClick="highlight(this);">Click me to see me change color and back</span> 

function highlight(obj){ 
    var orig = obj.style.color; 
    obj.style.color = '#f00'; 
    setTimeout(function(){ 
     obj.style.color = orig; 
    }, 5000); 
}

출처

2014-03-25 17:39:40

이 문제는 jquery를 사용하는 것이 좋습니다. here을 다운로드 할 수 있습니다. 에 대한 자세한 내용은

<script> 
$(document).ready(function(){  //this ensures that all elements have been loaded before you are executing any js 
    function highlight(){ 
     $("#kontakt").css("background-color", "#A5DF00"); 
     setTimeout(function(){ 
      $("#kontakt").css("background-color", "#000000"); 
     }, 1000); 
    }; 
// now to execute highlight() by clicking on the button you use 
    $("#id-of-the-button").click(highlight(); 
// there is no further need of the onclick attribute for your button 
} 
</script>

: 그리고 지금 당신은 다음과 같은 기능을 사용하여 'KONTAKT'아이디로 텍스트를 강조 할 수

<head> 
other code... 
<script src="directory/where/you/installed/jquery"></script> 
</head>

로, HTML 문서의 머리 섹션을 업데이트하여 사용 jquery를 사용하는 방법은 w3schools입니다. 그들은 그 작업들을위한 아주 훌륭한 튜토리얼들을 많이 가지고 있습니다.

출처

2014-03-25 18:01:30

내 텍스트를 강조 표시하는 방법

답변

관련 문제