Question

我希望使用JS删除或重置在特定DOM节点上应用的样式。

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

但它不起作用。

P.S。不能使用任何框架。

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

如何使用JS删除或重置CSS样式？

3 个答案: