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（＆＃34; width＆＃34;），但我需要从prop('outerHTML')获取此内容。

请帮忙。

Answer 1

您可以从DOM元素对象的outerHTML属性获取它。您可以使用索引获取DOM element from jQuery objec。

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

UPDATE 1：要从属性获取宽度，请使用attr()方法获取属性值，使用String#match方法从字符串中使用正则表达式获取样式属性值。 / p>

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>

如何使用Jquery从外部html结构中获取css值？

1 个答案: