CODEWITHSUNDEEP
javascriptjquery
Suyash
Suyash

Reputation: 341

Fetching inner style attribute using jQuery

I have this part of html, I need to fetch only the inner style tag attribute. but the structure can change for next part of 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>

I tried using element.attr("style"), but i get the outer

tags style attribute. can i use child to find this? any suggestions?

Upvotes: 0

Views: 174

Answers (3)

Black Mamba
Black Mamba

Reputation: 15545

I'm giving a number of options you can use according to your situation as follow:

If you want style tag of first span child only

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

If you want inner style of each child

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

If you want inner style of span child

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

Here's a runnable with working example of each case:

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

Upvotes: 0

Vishvadeep singh
Vishvadeep singh

Reputation: 1663

You can get css off inner element check here

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

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

Upvotes: 1

Houssein Zouari
Houssein Zouari

Reputation: 722

you can use getComputedStyle but it is javascript not jquery methood. 

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

Upvotes: 1

Related Questions