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? — user188654
– user188654, Commented Dec 19, 2011 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
– KSDaemon, Commented Dec 19, 2011 at 12:44

Ashwin Krishnamurthy · Accepted Answer · 2011-12-19 13:10:03Z

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, 2011 at 13:10

answered Dec 19, 2011 at 12:43

Ashwin Krishnamurthy

3,7563 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ashwin Krishnamurthy Over a year ago

Yeah, call the MyFunction for each of your filtered in element in the for loop. Ill update hang on.

petko_stankoski Over a year ago

It gets called for each element, it's an event, I can't call it for specific elements.

Ashwin Krishnamurthy Over a year ago

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 Over a year ago

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.

Niet the Dark Absol · Accepted Answer · 2011-12-19 12:45:52Z

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, 2011 at 12:45

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

1 Comment

nnnnnn Over a year ago

+1 for simplicity (even though you missed the opportunity to say "!important is unimportant here").

KSDaemon · Accepted Answer · 2011-12-19 12:43:08Z

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, 2011 at 12:43

KSDaemon

3662 silver badges9 bronze badges

Comments

Mohammad Saberi · Accepted Answer · 2011-12-19 12:55:08Z

-1

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.

edited Dec 19, 2011 at 12:55

answered Dec 19, 2011 at 12:49

Mohammad Saberi

13.2k28 gold badges81 silver badges132 bronze badges

Collectives™ on Stack Overflow

Css code in javascript function

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related