javascript add style remove style

Question

i have a simple javascript that add style to a slider when is turn to show, but i want to remove the style when the next slider come and also on mouse over remove the both style.

This is my javascript function that add style="width: 200px" to new slider and add style="width: 200px" to old.

function test(){
    var read = document.getElementById("slide-0") // how can i add here to read the incremented slide-0, slide-1, slide-2
        .removeAttribute("style",0);
}

    function noEffect(pOld,pNew){

        if (pOld){
            pOld.style.width='10px';
        }

        if (pNew){
            pNew.style.width='200px'; //this style become on active slider.
        }
    }

Slider html

<div class="slider" onMouseOver="test()">
<ul>
<li id="slide-0" class="slide" style="width: 10px"><img src="image.jpg"></li>
<li id="slide-1" class="slide" style="width: 200px"><img src="image.jpg"></li> <!-- this is active now -->
</ul>
</div>

Exactly what i want is to remove the style on both on mouseover.

Any help is appreciated.

the id "slide-0" is repeated, ID can not be repeated. <li id="slide-0" class="slide" style="width: 10px"><img src="image.jpg"></li> <li id="slide-0" class="slide" style="width: 200px"><img src="image.jpg"></li> — Korvo
– Korvo, Commented Jun 29, 2013 at 12:35

PSR · Accepted Answer · 2013-06-29 12:27:49Z

3

specify 0px

pOld.style.width='0px';

answered Jun 29, 2013 at 12:27

PSR

40.4k43 gold badges115 silver badges154 bronze badges

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

4 Comments

Dario Over a year ago

yes, on apply pOld.style.width='0px'; is hiding the slider block.

Dario Over a year ago

and also on mouse over other slider li, one of slider li have width: 200px and i need to remove on mouse over.

PSR Over a year ago

see here roseindia.net/javascript/…

Dario Over a year ago

Hi @PSR, lets say that i figure it out, but how can i read the incremented slide0, slide-1... see my updated question

Alexey · Accepted Answer · 2013-06-29 13:41:46Z

2

A very nice solution would be to uses classes. Instead of adding a style, add and remove classes. The following code adds a class to the component that will be styled.

var d = document.getElementById("div1");
d.className = d.className + " widthAlteration";

And in your CSS have:

.widthAlteration
{
    //width alteration
}

And if you would want to revert the effect, just do the same:

var d = document.getElementById("div1");
d.className = "";

Or for convenience there is integrated command for that:

var ele = document.getElementById("div1");
addClass(ele, "widthAlteration");
// or
removeClass(ele, "widthALteration");

Seeing as the previous part was not working, I will suggest jQuery

Implement the .js file in your project and use jQuery. It is one of the most commonly used libraries. It is rare to see JS done in raw (maybe if you only need to perform a simple operation), but in general cases, jQuery is the way to go.

After implementing, add this to your project:

<script>
$( document ).ready(function() {
//$("here goes the ID, class, component w.e. you desire")
    $(".widthAlteration").click(function(){
        $(this).removeClass(".widthAlteration");
    });
});
</script>

edited Jun 29, 2013 at 13:41

answered Jun 29, 2013 at 12:39

Alexey

3,6478 gold badges36 silver badges56 bronze badges

8 Comments

nnnnnn Over a year ago

@Alexey - Where are addClass() and removeClass() defined? (You said they're "integrated", but they're not standard JS/DOM functions.) Also, note that d.className = ""; will remove all classes from the element in question.

Alexey Over a year ago

I was going to suggest jQuery, but thought that would be off topic. I thought these function were defined in raw JS.

Dario Over a year ago

I have an issue with Jquery, my website don't want to read some Jquery functions, thats because i want to extend my actual javascript, please have a look at my updated question. Thanks a lot

Dario Over a year ago

i understand you, the issue is that to change it to jquery i need to change the hole script. Thanks a lot

Alexey Over a year ago

Change the whole script? It is just a library. You can just add my function and use the rest of your JS as it is. It doesn't force you to only use jQuery.

|

Collectives™ on Stack Overflow

javascript add style remove style

2 Answers 2

4 Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related