2013-03-05 6 views
-2

어떤 페이지로도 실행할 수있는 애플릿 종류를 만들 수 있으며 CSS 속성을 추출하는 요소를 선택하면됩니까?javascript가있는 요소에서 CSS 추출

firebug와 같이 코드를보고 싶은 div를 선택할 수 있지만 대신 버튼을 선택하고 복사하여 붙여 넣기 할 수있는 선택 가능한 입력란에 CSS를 넣을 수 있습니다.

+0

당신은 방화범처럼? https://getfirebug.com/css – Tsubashi

+1

이것은 쉽게 구현해야합니다. mouseClickListener가 필요합니다. 그런 다음 .style 또는 .css를 사용하여 선택한 요소에서 스타일을 추출 할 수 있습니다. 여기를보세요 http://stackoverflow.com/questions/3968593/how-to-set-multiple-css-style-properties-in-javascript 및 여기 http://stackoverflow.com/questions/395341/get-element- stylesheet-style-in-javascript 및 여기 http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript – ffledgling

답변

0

감사합니다. 누가이 질문에 도움을 주려고했는지 감사드립니다.

내가 무엇을 묻고 싶었는지 생각한 후에 크롬이나 파이어 폭스와 같은 브라우저 웹 개발자 도구에서 이미 발견 할 수있는 것들을 생각해보십시오.

답을 찾으려면 바퀴를 다시 열어야 할 필요가 없습니다. 예를 들어 자바 스크립트를 사용하면 가능하지만 필요하지 않습니다. 우리가 이미 html과 css를 검사하고 동일한 결과를 얻을 수있는 도구를 찾을 수 있기 때문입니다. 소스에서 복사/추출 할 수 있습니다.

불편을 끼쳐 드려 죄송합니다.

1

당신은 window.getComputedStyle

var styles = window.getComputedStyle(document.getElementById('foo'), null); 
for (style in styles) { 
    if (styles.hasOwnProperty(style)) { 
     console.log(style, styles[style]); 
    } 
} 
1

방화범 버그 크롬의 개발자 도구에 대한 확실하지 당신이, 붙여 넣기 및 편집을 복사 할 수있는 CSS 제공을 통해의 CSSStyleDeclaration 객체를 얻을 수 있습니다. 또한 스타일이 오는 파일, 내부 스타일 또는 인라인 및 최종 계단식 "계산 스타일"에 대한 분석을 보여줍니다.

+0

이것은 실제로 질문에 대답하지 않습니다. – JJJ

+0

예, 파이어 폭스 개발자 바도 시원한 기능을 많이 가지고 있습니다. 애플릿으로 북마크에 추가 할 수있는 것을 생각하고 있었고 페이지의 요소를 클릭하여 HTML 및 CSS 스타일을 추출 할 수 있습니다. –

관련 문제