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ファイル構造ではなく、コンテンツを取得したいです。助けてください。

編集

私たちは、私がwidthを得ることができますどのようにこの結果から$("#im").prop('outerHTML');

を使用することができることを理解できますか？

私は、.css（ "width"）を使用できますが、これはprop('outerHTML')から取得する必要があることがわかります。

助けてください。

Answer 1

DOM要素オブジェクトのouterHTMLプロパティから取得できます。インデックスを使用してDOM element from jQuery objecを得ることができます。

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

---

UPDATE 1：文字列から正規表現を使用したスタイルプロパティの値を取得するには、属性値とString#match方法を取得するにはattr()メソッドを使用して属性から幅を取得します。

---

UPDATE 2

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>

：あなたはプロパティが 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>

---

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