In this post we will discuss how we can apply jQuery. We all know that we cannot apply am important CSS property directly to an element. It does not work. But still there is a solution for that. Here I am going to share you that. I hope you will like this.

Background

Recently, I was going through a situation to apply a custom CSS to an element which already has some CSS styles and all. I wanted to overwrite those CSS in situation based, that is when some condition satisfies.

Please see this article in my blog here

Using the code

Firstly, we will create a page and some div elements.

  1. <!DOCTYPE html>
  2. <html
  3. xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>CSS Important In JQuery</title>
  6. <script src="jquery-2.0.2.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="container">
  10. <div style="width: 25px;height: 28px;padding: 5px;background-color: green;margin: 3px;float: left;cursor: move;" ></div>
  11. <div style="width: 25px;height: 28px;padding: 5px;background-color: green;margin: 3px;float: left;cursor: move;" ></div>
  12. <div style="width: 25px;height: 28px;padding: 5px;background-color: green;margin: 3px;float: left;cursor: move;" ></div>
  13. </div>
  14. </body>
  15. </html>

You an see that I have loaded a jQuery reference and added some in-line CSS to the elements. As you all know, even if we give a custom css as in the following code snippet:

  1. <style>
  2. #container div {
  3. width:55px;
  4. }
  5. </style>
The width will be 25px, because we have set the in-line css as

Now if you run your page and check your browser console you can get to know that.

Important CSS Property In JQuery And CSS

Important CSS Property In JQuery And CSS

In this situation, we use !important tag in the css, so if you change your css styles as follows, you can see your new css is getting applied.

  1. <style>
  2. #container div {
  3. width:55px !important;
  4. }
  5. </style>

Now refresh your page and see the browser console.

Important CSS Property In JQuery And CSS

Important CSS Property In JQuery And CSS

Now what if you need to change this CSS, when there is a jQuery action. For example, you need to change the css styles when user clicks on an element? Cool, we have a solution for that too. Now you will be thinking the solution is as follows.

  1. <script>
  2. $(function () {
  3. $('#click').click(function () {
  4. $("#container div").css('width', '75px;!important');
  5. });
  6. });
  7. </script>
Here #click is my a href.
  1. <a href="#" id="click">Click</a>

If you run that, you will know it didn’t work. No worries, I am going to share you a solution for this.

Now we will change our script as in the following code snippet:

  1. <script>
  2. $(function () {
  3. $('#click').click(function () {
  4. //$("#container div").css('width', '75px;!important');
  5. $("#container div").each(function () {
  6. this.style.setProperty('width', '75px', 'important');
  7. });
  8. });
  9. });
  10. </script>

And it is tie to run our page now.

Important CSS Property In JQuery And CSS

Important CSS Property In JQuery And CSS

Just click on the href, and see the output and browser console.

Important CSS Property In JQuery And CSS

Important CSS Property In JQuery And CSS

We have done it finally.

Complete Code

  1. <!DOCTYPE html>
  2. <html
  3. xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>CSS Important In JQuery</title>
  6. <script src="jquery-2.0.2.min.js"></script>
  7. <script>
  8. $(function () {
  9. $('#click').click(function () {
  10. //$("#container div").css('width', '75px;!important');
  11. $("#container div").each(function () {
  12. this.style.setProperty('width', '75px', 'important');
  13. });
  14. });
  15. });
  16. </script>
  17. <style>
  18. #container div {
  19. width:55px !important;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div id="container">
  25. <div style="width: 25px;height: 28px;padding: 5px;background-color: green;margin: 3px;float: left;cursor: move;" ></div>
  26. <div style="width: 25px;height: 28px;padding: 5px;background-color: green;margin: 3px;float: left;cursor: move;" ></div>
  27. <div style="width: 25px;height: 28px;padding: 5px;background-color: green;margin: 3px;float: left;cursor: move;" ></div>
  28. </div>
  29. <a href="#" id="click">Click</a>
  30. </body>
  31. </html>

Conclusion

Did I miss anything that you may think which is needed? Have you ever faced this issue in your programming life? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a questions and feedback, please mention it in the comment section below.