How to use CSS with JS [duplicate]

Question

I want to activate CSS using JS. Let's say I have this code, and I want to enlarge a picture at first click and then send it to the right after at the second click, but it's not working. Is the function correct?

How can I use JavaScript to control the CSS of an element?

<script>
    function function(){
        var house = document.getElementById("house");
            if(this.className == "mystyle")
                this.className = "mystyle2";
            else
                this.className = "mystyle";
    }
</script>

 <a href="#" style="text-decoration: none"><img src="casa1.jpg" id="house" width="200" height="150" onclick="function()">

I want it to activate this CSS:

.mystyle {
position: absolute;
left: 50%;
margin-left: -100px;
}

.mystyle2{
    float: right;
}

You can't give a function the name "function". You should see an error in the browser console if you check (which you should). — Pointy
– Pointy, Commented Dec 28, 2014 at 17:08
Not really duplicate. As i do not know how to make the function do something else on second click. — Angelo
– Angelo, Commented Dec 28, 2014 at 17:16
you just place a counter variable for each click and check for the counter value on each click.. — Lal
– Lal, Commented Dec 28, 2014 at 17:19
I tried it like this, but doesnt work : function functie(){ var house = document.getElementById("house"); var count; count++; if(count%2 == 1) house.className = "mystyle"; else house.className = "mystyle2"; — Angelo
– Angelo, Commented Dec 28, 2014 at 17:28

Shomz · Accepted Answer · 2014-12-28 17:28:36Z

1

Your code is good, but your scope is bad. Instead of this inside the function, you need to use house:

function function1() {
  var house = document.getElementById("house");
  if (house.className == "mystyle")
    house.className = "mystyle2";
  else
    house.className = "mystyle";

}

.mystyle {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

.mystyle2 {
  float: right;
}

  <img src="http://images.clipartpanda.com/cute-house-clipart-house_clipart_12.gif" id="house" width="200" height="150" onclick="function1()">

answered Dec 28, 2014 at 17:28

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

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

1 Comment

Angelo Over a year ago

Thanks. Worked great.

mshefiti · Accepted Answer · 2014-12-28 17:34:31Z

1

Replace this, with house. In JavaScript this always refers to the “owner” of the function we're executing, or rather, to the object that a function is a method of. When you define your function function1() in a page, its owner is the page, or rather, the window object (or global object) of JavaScript. Otherwise looks good.

answered Dec 28, 2014 at 17:34

mshefiti

1131 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to use CSS with JS [duplicate]

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related