如何使用Jquery從外部html結構中獲取css值？

Question

嗨，我有以下的HTML代碼

<div id="im" style="width:20px; color:red;" >12</div> 

我需要得到這個HTML結構<div id="im" style="width:20px; color:red;" >給一個變量。我如何得到這個？

來獲取文本，或在div裏面的內容，我們可以使用

$("#im").html(); 

但我想要得到的HTM結構，而不是內容。請幫忙。

編輯

據我所知，我們可以使用$("#im").prop('outerHTML');

從這個結果我怎樣才能得到width？

我知道我們可以使用.css（「寬度」），但我需要從prop('outerHTML')得到這個。

請幫忙。

Answer 1

您可以從DOM元素對象的outerHTML屬性中獲取它。在哪裏你可以得到DOM element from jQuery objec噸使用索引。

$("#im")[0].outerHTML 

---

UPDATE 1：爲了從屬性的寬度使用attr()方法來獲得屬性值和String#match方法來獲得使用正則表達式從字符串的樣式屬性值。

console.log(
 
    $('#im').attr('style').match(/width\s?:([^;]+)/)[1] 
 
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="im" style="width:20px; color:red;">12</div>

---

更新2：雖然你可以使用屬性 css()方法計算。

console.log(
 
    $('#im').css('width') 
 
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="im" style="width:20px; color:red;">12</div>

---

更新3：爲了得到它從字符串用jQuery包裝它，做同樣的。

console.log(
 
    $($('#im')[0].outerHTML).css('width') 
 
) 
 

 
// or 
 

 
console.log(
 
    $($('#im')[0].outerHTML).attr('style').match(/width\s?:([^;]+)/)[1] 
 
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="im" style="width:20px; color:red;">12</div>