Как удалить или сбросить стиль CSS с помощью JS?

Question

Я хочу удалить или сбросить стиль, примененный к определенному узлу DOM, используя JS.

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

Я хочу сбросить / установить webkitTransform время от времени при возникновении события
Пробовал вот так

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

Но это не работает.

PS Не могу использовать какие-либо рамки.

Answer 1

Если вы хотите удалить правило из элемента, то это должно сработать:

node.style.webkitTransform = ''; 

Answer 2

Вот пример, который должен соответствовать вашим потребностям.Переключается при нажатии на документ.Примечание: он, конечно, работает только в браузерах на основе Webkit.

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/

Answer 3

Вы говорите, что не хотите использовать фреймворк.но если это нормально (согласно вашему комментарию) сделать это:

Вы можете использовать jQuery :

, так что вы можете сделать в jQuery:

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

Вы можете очистить элемент стиля с помощью:

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

добавить класс:

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

удалить класс:

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