使用jQuery获取内部样式属性

Question

我有html的这一部分，我只需要获取内部样式标记属性。但是html的下一部分的结构可能会发生变化。

<p class="Normal DocDefaults  data-selection ui-selectee selectable-disabled" style="border-color: #FFFFFF; border-style:solid; border-width:1px;background-color: #FFFFFF;margin-top: 0.07in;margin-bottom: 0.07in;">
<span style="color: #000000;font-style: italic;text-decoration: underline;;font-family: 'Arial';">Serialization is required for a variety of reasons. It is required to send across the state of an object over a network by means of a socket. One can also store an object’s state in a file. Additionally, manipulation of the state of an object as streams of bytes is required. The core of Java Serialization is the Serializable interface. When Serializable interface is implemented by your class it provides an indication to the compiler that java Serialization mechanism needs to be used to serialize the object.
</span>
</p>

我尝试使用element.attr("style")，但我得到了外部

标记样式属性。我能用child找到这个吗？有什么建议吗？

Answer 1

您可以使用getComputedStyle，但它是javascript而不是jquery方法。

var data = getComputedStyle($('span')[0]).background; 
console.log(data);

Answer 2

您可以在此处获取内部元素检查的css

HTML:

<p class="Normal DocDefaults  data-selection ui-selectee selectable-disabled" style="border-color: #FFFFFF; border-style:solid; border-width:1px;background-color: #FFFFFF;margin-top: 0.07in;margin-bottom: 0.07in;">
<span style="color: #000000;font-style: italic;text-decoration: underline;;font-family: 'Arial';">Serialization is required for a variety of reasons. It is required to send across the state of an object over a network by means of a socket. One can also store an object’s state in a file. Additionally, manipulation of the state of an object as streams of bytes is required. The core of Java Serialization is the Serializable interface. When Serializable interface is implemented by your class it provides an indication to the compiler that java Serialization mechanism needs to be used to serialize the object.
</span>
</p>

Jquery代码：

var element= $('p').children().attr('style');
alert(element);

Answer 3

我给出了一些选项，您可以根据自己的情况使用，如下所示：

如果您只想要第一个span子项的样式标签

console.log($('p').children('span').eq(0).attr('style'));

如果你想要每个孩子的内在风格

$('p').children().each(function() {
console.log($(this).attr('style'));
})

如果您想要span child的内部风格

$('p').children('span').each(function() {
console.log($(this).attr('style'));
})

以下是每个案例的可运行的工作示例：

$(document).ready(() => {
$('p').children().each(function() {
// if you want inner style of each child
console.log($(this).attr('style'));
})
$('p').children('span').each(function() {
// if you want inner style of span child
console.log($(this).attr('style'));
})
// if you want style tag of first span child only
console.log($('p').children('span').eq(0).attr('style'));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="Normal DocDefaults  data-selection ui-selectee selectable-disabled" style="border-color: #FFFFFF; border-style:solid; border-width:1px;background-color: #FFFFFF;margin-top: 0.07in;margin-bottom: 0.07in;">
<span style="color: #000000;font-style: italic;text-decoration: underline;;font-family: 'Arial';">Serialization is required for a variety of reasons. It is required to send across the state of an object over a network by means of a socket. One can also store an object’s state in a file. Additionally, manipulation of the state of an object as streams of bytes is required. The core of Java Serialization is the Serializable interface. When Serializable interface is implemented by your class it provides an indication to the compiler that java Serialization mechanism needs to be used to serialize the object.
</span>
</p>