jQuery doesn't read CSS

Question

// Helper func
init = (obj, id) => {
  return obj.style.split(':')[id]
}

train = (i, o) => {
  iProp = init(i, 0);
  iVal = init(i, 1);
  oProp = init(o, 0);
  oVal = init(o, 1);

  alert($(i.dom).css('color'))
}

train({
  dom: 'p',
  style: 'color:rgb(0, 0, 0)'
}, {
  dom: 'p',
  style: 'color:rgb(0, 50, 65)'
})

p {
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Text</p>

When I run the code it gives an empty alert, in anWriter Editor it gives an alert 'Undefined'. Why jQuery doesn't see CSS, but I added CSS at the top of the HTML page. Why does it output undefined and how to fix it?

@LelioFaieta his alert is doing a jQuery selector and method call — Taplar
– Taplar, Commented Jun 22, 2018 at 16:22
Are we missing something here, running your snippet I get rgb(0, 0, 0), this is using Chrome. — Keith
– Keith, Commented Jun 22, 2018 at 16:29

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

I don't think its problem with jQuery or javascript for below reasons:

I ran your code and found that the alert is being fired way before the DOM is actually rendered. Please see the screenshot below:

Your alert is getting called automatically while your script is getting triggered, which is before the HTML being rendered. So, I moved the script to the bottom of the document and it worked. Please see the screenshot below:

In a nutshell, I would suggest calling the alert manually when your DOM is actually ready.

Hope it will help.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 22, 2018 at 16:57

Sandeep Kumar

2,5935 gold badges35 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Supun Praneeth · Accepted Answer · 2018-06-22 17:55:38Z

1

Because your DOM wasn't rendered when you call the alert. Try with jquery ready function:

// Helper func
init = (obj, id) => {
  return obj.style.split(':')[id]
}

train = (i, o) => {
  iProp = init(i, 0);
  iVal = init(i, 1);
  oProp = init(o, 0);
  oVal = init(o, 1);
  
  $(function(){
    alert($(i.dom).css('color'));
  });
}

train({
  dom: 'p',
  style: 'color:rgb(0, 0, 0)'
}, {
  dom: 'p',
  style: 'color:rgb(0, 50, 65)'
})

p {
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Text</p>

answered Jun 22, 2018 at 17:55

Supun Praneeth

3,1802 gold badges33 silver badges36 bronze badges

Collectives™ on Stack Overflow

jQuery doesn't read CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related