당신은 문서 개체의 getComputedStyle() 메소드 요소의 속성 필드 사용할 수 있습니다 :이 요소가있는 각 CSS 스타일 필드 객체를 반환해야
var oDiv = document.getElementById("div1");
var css = document.defaultView.getComputedStyle(oDiv, null);
var attr = oDiv.attributes;
합니다. 그런 다음 DOM의 모든 요소를 반복하는 간단한, 깊이 우선 트리 거리를 쓸 수 있습니다 (I가 쉽게 따라 할 수 있도록 jQuery로 쓴) : 나는 카운터를 넣어
var stack = new Array();
stack.push($('html')[0]);
var i = 0;
while(stack.length > 0 && i < 100){
//pop the next element off the stack
var ele = stack.pop();
var css = document.defaultView.getComputedStyle(ele, null);
var attr = ele.attributes;
//do things with the css object
console.log(css);
//do things with the attributes
console.log(attr);
//add children to the stack
$(ele).children().each(function(index, child){
stack.push(child);
});
i++;
}
주 (I)를 사용하여 반복 횟수를 100으로 제한하고 페이지에 많은 요소가있는 경우 브라우저가 끊어지지 않도록하십시오. 원한다면 제거 할 수 있지만 조심하십시오. 또한 검색 루트는 DOM의 모든 노드가 될 수 있지만 html 태그로 시작했습니다.
귀하의 의견을 바탕으로, 이것을 구현하는 방법을 살펴 보겠습니다. CSS/애트리뷰트 객체를 콘솔에 출력하는 것 뿐이므로 실제로 원하는 부분을 수정해야합니다.
스크립트 :
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
function doStuff(){
var stack = new Array();
stack.push($('html')[0]);
var i = 0;
while(stack.length > 0 && i < 100){
//pop the next element off the stack
var ele = stack.pop();
var css = document.defaultView.getComputedStyle(ele, null);
var attr = ele.attributes;
//do things with the css object
console.log(css);
//do things with the attributes
console.log(attr);
//add children to the stack
$(ele).children().each(function(index, child){
stack.push(child);
});
i++;
}
}
</script>
</head>
<body>
<button type="button" onclick="doStuff()">Click Me!</button>
</body>
</html>
나는 것
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
function doStuff(){
var stack = new Array();
stack.push($('html')[0]);
var i = 0;
while(stack.length > 0 && i < 100){
//pop the next element off the stack
var ele = stack.pop();
var css = document.defaultView.getComputedStyle(ele, null);
var attr = ele.attributes;
//do things with the css object
console.log(css);
//do things with the attributes
console.log(attr);
//add children to the stack
$(ele).children().each(function(index, child){
stack.push(child);
});
i++;
}
}
</script>
HTML 버튼 그것을
<button type="button" onclick="doStuff()">Click Me!</button>
전체 구현을 실행 당신이 이걸로 성취하려는 것을 듣고 싶습니다. 이것은 느린 작업이며 페이지에 넣은 태그를 검사하는 것이 일반적으로별로 도움이되지 않습니다 ...
가능한 복제본 [jQuery를 사용하여 모든 요소 CSS 속성의 목록을 얻는 방법은 무엇입니까?] (http :// /stackoverflow.com/questions/1471118/how-can-i-get-list-of-all-element-css-attributes-with-jquery) – Josh
@ Josh :이 질문과 100 개가 넘는 질문이 있지만 나는 "플러그인"보다는 acutal 코드. Javascript의 Noob/jQuery입니다. – Jawad
@ 자 와드 : [this] (http://stackoverflow.com/a/6416477/420001) 링크가 있습니다. – Josh