Find which js function is applied to a div

Question

0.00/5 (No votes)

See more:

Hi, i have a div in which an inline style="height:200px" is applied. How can i find from which javascript/jquery function is this coming from?

Posted 15-Dec-12 10:12am

ophelia_123

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Graham Breach · Answer 1 · 2012-12-15T11:37:00

Solution 2

In Chrome you can set breakpoints for when attributes are modified.

Right-click the element you want to watch and choose "inspect" from the menu. In the HTML view, right-click the element again and choose "Break on..." and then "Attributes modifications". That should drop you into the Javascript debugger when the style is changed.

Posted 15-Dec-12 11:37am

Graham Breach

Comments

Christian Graus 15-Dec-12 17:42pm

Wow - I did not know that, thank you.

ophelia_123 15-Dec-12 17:43pm

i tried that before.. the debugger does not open. i just see the breakpoint in the DOM Breakpoints section. Maybe because this style is applied on page load??

Graham Breach 15-Dec-12 19:15pm

OK, then you can use the timeline view to record events and reload the page. Changes that make the page redraw are listed along with a link to where in the Javascript the update was caused.

Christian Graus · Answer 2 · 2012-12-15T10:37:00

Solution 1

You can use Chrome to debug and see what css styles are being applied. But, you can't tell if styles were applied directly, by what function. Try to apply them via CSS for a start. If you have a ton of functions that all do the same thing ( set the height to 200 ) then your code is a mess to start with. You could comment out different functions until you find the one that was applying it.

Posted 15-Dec-12 10:37am

Christian Graus

Comments

ophelia_123 15-Dec-12 16:50pm

I Cant use the debug tool because i dont know from which file this style comes from. i just use the inspect element and see that a height is applied and i want to change it but i can't find how this is generated. i thought maybe there was a way to see which function adds this style... - it's not my code btw.

Christian Graus 15-Dec-12 17:01pm

You can, actually. You can expand the Matched CSS rules, go through them, and see which one the height is coming from. The only way, if it's done with styles and not classes, is to comment out code and see what happens. Or just search the code for height: 200px.

ophelia_123 15-Dec-12 17:38pm

im not sure i understand exactly what you mean. i have search for height:200px but i didn't find anything... the div has element.style {height:200px} maybe if you take a screenshot might help me (?)