如何删除或重置CSS样式使用JS？ [英] How to remove or reset CSS style using JS?

问题描述

我想要移除或重设使用JS在特定DOM节点上应用的样式。

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)';

我想重置/设置 webkitTransform 再次对事件的火焰

尝试像这样

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)';

但它不工作。

不能使用任何框架。

推荐答案

这里有一个适合您需求的示例。当您单击文档时，它会切换。注意：它当然只适用于基于Webkit的浏览器。

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/

这篇关于如何删除或重置CSS样式使用JS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！