獲取給定元素的每個和每個CSS屬性和HTML屬性

使用Javascript/jQuery，是否有可能獲取屬性名稱及其值，以及HTML屬性名稱及其給定元素的值文件。這是不管他們是：獲取給定元素的每個和每個CSS屬性和HTML屬性

內嵌樣式

<h1 style="font-weight="900">Heading 1</h1>

嵌入式

<style> 
h1 
{ 
font-weight: bold; 
} 
</style>

聯

<link href="main.css" rel="stylesheet" type="text/css" media="all" />

進口

@import url("reset.css");

而不管

用戶代理/瀏覽器（IE，FF，GC，AS，OP）
默認樣式通過上述
版本的應用的以上

那麼，可以fireup的Firebug或開發工具我FF和其他UA中類似的工具，但他們缺乏一些能力。我正在尋找一個jQuery插件類型，其中元素顯示在左側，以上所有顯示在右側（可能在iframe中？）。

我只是做一個文件（一個非常簡單，也許只有一個元素說），並顯示在我的瀏覽器的左側，上面顯示在右側。

來源

2012-09-06 Jawad

可能重複的[我如何獲得jQuery的所有元素css屬性的列表？]（http：///stackoverflow.com/questions/1471118/how-can-i-get-list-of-all-element-css-attributes-with-jquery） – Josh

@Josh：這個問題有100多個問題，但我正在尋找「插件」而不是實際的代碼。 Noob in Javascript/jQuery，我就是。 – Jawad

@Jawad：有一個鏈接到[this]（http://stackoverflow.com/a/6416477/420001）。 – Josh

可以使用文檔對象的getComputedStyle（）方法和元素的屬性字段：

var oDiv = document.getElementById("div1"); 
var css = document.defaultView.getComputedStyle(oDiv, null); 
var attr = oDiv.attributes;

這應該爲每個CSS樣式元素有場返回一個對象。然後，您可以編寫一個簡單的，深度優先樹步行到每一個元素遍歷的DOM（我寫這與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++; 
}

注意，我把一個計數器（我），以將迭代次數限制爲100次，並防止在頁面中有大量元素的情況下使瀏覽器崩潰。你可以刪除這個，如果你想，但要小心。還要注意，搜索的根目錄可以是DOM中的任何節點，但我從html標籤開始。

根據您的意見，我將介紹如何執行此操作。請記住，它所做的只是將CSS /屬性對象打印到控制檯，您將需要修改該部分以執行您實際需要的內容。

腳本：

<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>

全面實施

<!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>

我會有興趣聽到你想用這個完成的事情。這是一個緩慢的操作，通常沒有太多的好處，檢查您在網頁上放置的標籤...

來源

2012-09-22 18:12:44 monitorjbl

我有所有這些代碼，但我不知道如何實現它。我的頁面總是隻包含每個文件的一個元素/標籤。我將有一個文件說，「heading_1.html」與最小標記，只有一個元素，說「h1」和另一個文件說，「paragraph.html」只有一個元素「p」等。我需要運行腳本並獲取HTML屬性以及CSS屬性。我如何「執行」你的上面的代碼？ – Jawad

我添加了代碼來獲取元素的屬性。你可以完全按照原樣來實現它。聽起來你可以從body標籤開始，而不是html標籤。由於您沒有足夠的元素來達到100個項目的閾值，所以您甚至不必去除計數器變量。 – monitorjbl

你沒有得到我的伴侶。我該如何處理代碼？將它保存爲JS並使用腳本標籤包含它？我保存上述代碼的JS文件，比如說「css_prop.js」，並將其包含在使用。這是如何實現它？ – Jawad

獲取給定元素的每個和每個CSS屬性和HTML屬性

回答

相關問題