Jump to content

Problem with JQuery .css() method


yeredkeremath
 Share

Recommended Posts

Hello, I created a simple html page which contains one <p> and one <h1> tag. To define style for these elements I have define external css. Below these two tags I have a button and on click of that button JQuery method will be called in which I am try to change the text color of both elements using .css() method.Here is my code./* index.html */<html><head> <link type="text/css" rel="stylesheet" href="css/style.css"/> <title>index</title> <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("body").css("color","yellow"); }); }); </script></head><body> <p id="style1"> This is style1 - P</p> <h1 class="style2"> This is style2 - Header</h1> <button>click</button></body></html> /* style.css */#style1{ color: red; font-weight: bold;} .style2{ color: red; font-style: italic;}This code is not working. On click of button color of both <p> and <h1> still remains red.But if I remove id and class name given to those element, then it is working.Any idea?Thank you.

Link to comment
Share on other sites

You're setting the CSS on the body element. That doesn't apply to the 2 elements you're trying to change because the CSS rules select those elements specifically, so it overrides whatever styles are set on the body. You need to target those specific elements and change the styles on them, not on the body.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...