CODEWITHSUNDEEP
javascriptcss
petko_stankoski
petko_stankoski

Reputation: 10713

Css code in javascript function

I have this javascript method:

<script type="text/javascript">
   function MyFunction(sender, eventArgs) {
       if (someCondition) {
           //css
       }
    }
</script>

The css code I want to be executed is:

<style type="text/css">
          .classInsideTheClassWhichEntersTheIf
          {
          background: url(Images/myImage.png) !important;
          }
</style>

but only for those cells that enter the if condition above. If I write it outside it works but for every cell. Is something like this possible? If yes, how to do it?

Upvotes: 4

Views: 50323

Answers (4)

Ashwin Krishnamurthy
Ashwin Krishnamurthy

Reputation: 3758

There are several ways to do this.

Option 1.

<script type="text/javascript">
   function MyFunction(sender, eventArgs) {
       if (someCondition) {
          someelement.style.cssText = "background: url(Images/myImage.png) !important;"
       }
    }
</script>

Option 2.

 <script type="text/javascript">
       function MyFunction(sender, eventArgs) {
           if (someCondition) {
              someelement.className = "someclass"
           }
        }
    </script>

where,

<style>
.someclass{
background: url(Images/myImage.png) !important;
}
</style>

Option 3

 <script type="text/javascript">
           function MyFunction(sender, eventArgs) {
               if (someCondition) {
                  someelement.setAttribute('style', 'background: url(Images/myImage.png) !important;');
               }
            }
        </script>

Here is a pseudo code,

if(condition)
  someelement.style.cssText = "background: url(Images/myImage.png) !important;";

Upvotes: 14

Mohammad Saberi
Mohammad Saberi

Reputation: 13166

Imagine that you have a cell with id="myCell" and your condition is true for what you want. Now you can do it using something like this:

$(document).ready(functio() {
   function SET(id) {
      $('#'+id).css('background-image','yourNewImage.png');
   }
   if (condition == true) {
      SET('myCell');
   }
});

Using .css, you can assign any value to each CSS property for each element. Here I changed the background-image.

Upvotes: -1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324610

<script type="text/javascript"> 
   function MyFunction(sender, eventArgs) { 
       if (someCondition) { 
          someelement.style.backgroundImage = "url(Images/myImage.png)"; 
       } 
    } 
</script>

!important is unnecessary here, because inline styles override non-inline styles.

Upvotes: 5

KSDaemon
KSDaemon

Reputation: 366

You can modify the style property of elements that you need. But more flexible method is to define a css-class with that css-code, and just add this class to filtered elements.

Upvotes: 0

Related Questions