1

I need to make changes to an element with a particular class name. The element cannot be found in the code of the webpage I am working on. However, it appears on the page. When I try to make style changes using internal css, it works but I cannot accomplish what I am trying to accomplish with css alone. So, when I try to make changes to that class using jquery css, I am unable to modify the element. Any idea as to why the inline css works but the jquery css does not work?

My CSS Code (this works):

.jqZoomWindow{
    border:2px solid red;
}

JQuery Code

$(".jqZoomWindow").css("border","2px solid red");
Improve this question
5
  • 1
    Can you post a jsfiddle to it ?! Commented May 18, 2012 at 13:56
  • Have you tried applying the jQuery CSS properties individually? i.e. borderWidth, borderStyle, borderColor Commented May 18, 2012 at 13:57
  • Yes I am not applying both styles at the same time I just thought it was important to note that the internal css works fine on the element but does not work if I try to apply it using jquery... Commented May 18, 2012 at 14:05
  • Are you running this inside document.ready()? The DOM might not be ready. Commented May 18, 2012 at 14:06
  • Yes, I am running it inside document.ready(). Commented May 18, 2012 at 14:08

5 Answers 5

Reset to default
1

This sounds like a CSS specificity problem.

Inline rules created with .css(..) will always take priority over stylesheet rules.

Do you have some other CSS style affecting the border that's more specific than .jqZoomWindow ?

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

5 Comments

There's also !important, of course, but improving the specificity is always preferable when possible.
there is some css style affecting .jqZoomWindow but it is in an external stylesheet which has less priority over internal and inline styles.
@Blazemonger actually I may have misread the question - it's unclear which method isn't working for him.
One good article on css specificity: css-tricks.com/specifics-on-css-specificity - you can also learn about it by using the browser's DOM debugger, since it will list the CSS attributes in the order in which they're applied.
@Alnitak Either way, I agree that the CSS "order of operations" is the source of his problem.
1

The element cannot be found in the code of the webpage I am working on. However, it appears on the page.

If you are running that bit of jQuery before the element exists on the page then it wont do anything. .css() only adds css to an element using the style attribute.

Improve this answer

Comments

0

Try this.

$(".jqZoomWindow").css({ 
     borderWidth: "2px", 
     borderStyle: "solid", 
     borderColor: "red"
});
Improve this answer

6 Comments

@MHZ It has a syntax error - an unnecessary ,. Also, jQuery supports shorthands for setters, so this should not help.
@MHZ - Try it now, I removed unwanted comma(typo)
still not working, shorthand css was written correctly and should work. I suspect that my shorthand css did not work, than this should not work either, and I am correct :)
@MHZ - Can you set up a fiddle?
I don't have access to the html element that I need to modify and the JQuery is included above, so fiddle will not really help... what strikes me odd is that regular css works just fine and JQuery css does not seem to work at all...! frustrating! :(
|
0

The problem is, in both CSS you are applying same border, color and pixel. Thats the reason why you are not able to see the difference.

It works as expected. Refer this DEMO and Another DEMO

Improve this answer

5 Comments

I am not applying both styles at the same time.
@MHZ This demo proves that the jQuery code works. You need to share more details, the problem is (of course) not with the tool, but lies elsewhere in your code. You should try to create a demo that reproduces your problem. It is quite probable that you will find the problem yourself in this process.
@MHZ: To show some difference, I have added one more demo for your reference.
thank you. However, I am not applying both styles at the same time. Only JQuery, and it does not work with jquery alone in my code. However, when I replace the Jquery code with internal css, it works just fine. That is my problem :(
@MHZ: You should have create a demo of your code on http://jsfiddle.net. So we can help you much better.
0

Why don't you just create a new class in your CSS file and then use .addClass() to add it whenever you need? You can manually add the class in the HTML to test it, and that will definitely narrow down the issue if it still doesn't work.

More info: http://api.jquery.com/addClass/

If you have to use .css(), have you tried using any other kind of property, like color, font-weight?

Improve this answer

1 Comment

Could you be more specific as to what is not working? .css() doesn't add the class? Trying things with a different property is not working? Are you positive that you are using the right selector? Why don't you post your HTML as well?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.