하이라이트 html 요소

HTML 요소를 자바 스크립트로 강조 표시하여 해당 요소에 연결된 html 및 css 선택기를 검사하는 방법을 설명합니다. 강조 표시는 테두리 나 배경의 변경 일뿐 (레이아웃을 깨뜨리지는 않습니다) HTML 요소와 CSS 선택기가 해당 요소에 연결되어 있음을 나타내는 도구 설명입니다.하이라이트 html 요소

출처

2012-02-03 user1188068

브라우저에서 개발자 도구를 사용하는 것이 어떻습니까? –

사용자 지정 솔루션을 원한다면 어디서 붙어 있는지 더 구체적으로 밝혀야합니다. –

직접 해 보았습니까? 좀 더 구체적인 문제를 해결할 수 없을 때 먼저 시도해 보겠습니다. 시작하는 것이 좋습니다 : http://api.jquery.com/category/selectors/ – Paul

당신은 이런 식으로 뭔가를 할 수 :

$('div, a, span, p').hover(function(){ 
    $(this).css({ "border": "2px solid red" }); 
    console.log($(this)); 
},function(){ 
    $(this).css({ "border": "none" }); 
});

그래도 난 요소를 검사 파이어 버그 (FF) 또는 콘솔 (크롬)을 사용하십시오.

출처

2012-02-03 17:35:11 nerdburn

적어도 jQuery를 사용하고 있다고 언급해야합니다. –

방화범과 같은 도구를 사용 해본 적이 있습니까? 이는 페이지의 소스를 표시하고 마우스 오버시 요소를 강조 표시하는 훌륭한 작업입니다. 또한 최신 버전의 세 가지 주요 브라우저 (Chrome, FF, IE)에는 기본 검사기가 있습니다. FF 10에서는 아무 것도 마우스 오른쪽 버튼으로 클릭하고 요소 검사를 클릭합니다. Chrome에서는 프로세스가 동일합니다. IE 9에서 F12 키를 누른 다음 Ctrl + B를 누르고 원하는 요소를 클릭하십시오.

출처

2012-02-03 17:36:34

올바르게 이해하면 Firefox의 경우 Firebug이나 IE의 경우 개발자 도구 (F12) 만 사용해야하는 것 같습니다. 모든 브라우저에 있습니다.

그들은 무엇이든 강조 표시하고 CSS 선택기로 놀 수있게 해줍니다. Absolute는 웹 개발자를위한 도구 여야합니다.

출처

2012-02-03 17:38:59 Tom

Google 크롬을 사용하는 경우보기/개발자/개발자 도구에서 개발자 도구를 사용하도록 설정할 수 있습니다. 이 메뉴를 선택하면 브라우저의 하단에 메뉴가있는 프레임이 표시됩니다 (여기에서 Elements 버튼을 클릭해야합니다). 이 메뉴에서 문서의 원본을 볼 수 있습니다. 브라우저에서 특정 태그 (예 : :)를 가리키면 요소가 강조 표시되고 강조 표시된 태그의 속성을 볼 수 있습니다.

출처

2012-02-03 17:42:40 Tibor

하이라이트 html 요소

답변

관련 문제