How to remove or reset CSS style using JS?

Question

I want either remove or reset a style applied on a particular DOM node using JS.

            node.style.webkitTransitionDuration = '5000ms';
            node.style.webkitTransformOrigin = '200px 200px';
            node.style.webkitTransform = 'rotateZ(25rad)';

I want to reset/set webkitTransform time and again on a fire of an event
Tried like this

        node.style.webkitTransform = 'rotateZ(0rad)';
        node.style.webkitTransform = 'rotateZ(25rad)';

But its not working.

P.S. Can not use any framework.

@Neal: thats the part of problem statement. But if I want to use a framewrok,then which should I use and how to do in that case? — Ashish Agarwal
– Ashish Agarwal, Commented Mar 28, 2011 at 17:30
so can you remove the PS so i can answer with a framework and not get down voted? :-P — Naftali
– Naftali, Commented Mar 28, 2011 at 17:32
@Neal: I Will not vote your answer down, but how its possible otherway? — Ashish Agarwal
– Ashish Agarwal, Commented Mar 28, 2011 at 17:35
@Neal: Pls delete your Answer. It not I wanted, and don't want to vote it down. — Ashish Agarwal
– Ashish Agarwal, Commented Mar 28, 2011 at 17:41

score 2 · Accepted Answer · 2011-03-28 18:31:11Z

Here's an example that should fit your needs. It toggles when you click on the document. Note: it of course only works in Webkit-based browsers.

animateNode(document.getElementById("test"), "5000ms", "200px 200px", "rotateZ(25rad)");
var toggle = toggleValue();
function animateNode(node, duration, origin, transform)
{
    node.style['webkitTransitionDuration'] = duration;  
    node.style['webkitTransformOrigin'] = origin;  
    node.style['webkitTransform'] = transform;
}

function toggleValue() {
    var num = 1;
    return function ()
    {
       return ++num;
    };
}

document.onclick = function()
{
    var toggleNum = toggle();
    if(toggleNum % 2 === 0)
    {
        animateNode(document.getElementById("test"), "5000ms", "200px 200px", "rotateZ(0rad)");  
    }else if(toggleNum % 2 === 1)
    {
        animateNode(document.getElementById("test"), "5000ms", "200px 200px", "rotateZ(25rad)"); 
    }
}

http://jsfiddle.net/GdGw7/3/

Rozwel · Accepted Answer · 2011-03-28 17:50:39Z

2

If you are looking to remove the rule from the element then this should work:

node.style.webkitTransform = '';

answered Mar 28, 2011 at 17:50

Rozwel

2,0302 gold badges22 silver badges31 bronze badges

Comments

Naftali · Accepted Answer · 2011-03-28 17:40:32Z

0

You say you don't want to use a framework. but if it is OK (according to your comment) to do so:

You can use jQuery:

so you can do in jQuery:

$('selector').css({
   webkitTransitionDuration = '5000ms',
   webkitTransformOrigin = '200px 200px',
   webkitTransform = 'rotateZ(25rad)'
})

you can clear out the style element with:

$('selector').attr('style','');

add class:

$('selector').addClass('newClass');

remove class:

$('selector').removeClass('rClass');

edited Mar 28, 2011 at 17:40

answered Mar 28, 2011 at 17:34

Naftali

147k41 gold badges247 silver badges304 bronze badges

2 Comments

Ashish Agarwal Over a year ago

I need to remove/reset CSS,I need not to apply CSS.

Naftali Over a year ago

so change the selector however you want ^_^

Collectives™ on Stack Overflow

How to remove or reset CSS style using JS?

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related