yeredkeremath Posted February 16, 2012 Share Posted February 16, 2012 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 More sharing options...
justsomeguy Posted February 16, 2012 Share Posted February 16, 2012 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.