Css code in javascript function

Question

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?

What do you mean "only for cells that enter the condition"? Is your JavaScript defined inline? Where is your style definition? I do hope not inside the document body? — , Dec 19 '11 at 12:43
Please provide more details on your code. There are no cells in your code, we dont know what is sender, etc. — KSDaemon, Dec 19 '11 at 12:44

Ashwin Krishnamurthy · Accepted Answer · 2011-12-19T13:10:03.150

14

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;";

edited Dec 19 '11 at 13:10

answered Dec 19 '11 at 12:43

Ashwin Krishnamurthy

3,750
3
27
49

Yeah, call the MyFunction for each of your filtered in element in the for loop. Ill update hang on. – Ashwin Krishnamurthy Dec 19 '11 at 13:03
It gets called for each element, it's an event, I can't call it for specific elements. – petko_stankoski Dec 19 '11 at 13:03
Ok, whenever your condition is satisfied, then make the css changes on those elements using cssText property by appending the new change or by using a class that has all the properties of the old element along with the new css property which you want to add. – Ashwin Krishnamurthy Dec 19 '11 at 13:05
I've updated it, You need to keep track of your elements. Check for the position based on the for loop iterator count and set that element with the change you want. I cant tell you much from whatever you have provided. You need to show us even the markup. – Ashwin Krishnamurthy Dec 19 '11 at 13:11

score 5 · Answer 2 · answered Dec 19 '11 at 12:45

5

<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.

answered Dec 19 '11 at 12:45

Niet the Dark Absol

320,036
81
464
592

4

+1 for simplicity (even though you missed the opportunity to say "!important is unimportant here"). – nnnnnn Dec 19 '11 at 13:47

score 0 · Answer 3 · answered Dec 19 '11 at 12:43

0

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.

answered Dec 19 '11 at 12:43

KSDaemon

366
2
9

Mohammad Saberi · Answer 4 · 2011-12-19T12:55:08.967

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.

Css code in javascript function

4 Answers4

Linked