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

2024-03-09

我想使用 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)';

但它不起作用。

附:不能使用任何框架。


这是一个应该适合您的需求的示例。当您单击文档时它会切换。注意:它当然只适用于基于 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/ http://jsfiddle.net/GdGw7/3/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 JS 删除或重置 CSS 样式? 的相关文章

  • 在 Javascript 中,使用 var foo = function foo(i) { ... } 的动机或优点是什么?

    我在答案中看到 在Javascript中 为什么要写 var QueryStringToHash function QueryStringToHash query https stackoverflow com questions 3233
  • 赋予 d3 序数轴标签与尺度名称不同

    我有一个序数scale具有不同值的某些标签 我想显示该比例的轴 其中轴标签与比例标签不同 我有这个代码 var width 1000 var height 600 var margins left 100 40 right 25 botto
  • 在 Bootstrap 3 中将容器类嵌套在容器流体类中?

    除了填充问题之外 为什么不建议将 container 嵌套在 container fluid 中 如果将子容器填充归零 如下面我的代码所示 则效果与拥有一个容器相同 此外 如今 不同的全宽和固定宽度布局似乎很常见 我知道文档说了什么 LIN
  • Angular 7 Guard 重定向仅适用于双击

    问题是我已经实现了一个 Guard 旨在处理特定的目录 如果当前用户名的角色等于 2 它应该返回 true 如果没有 那么它不应该重定向 这是我的 app routing module ts 文件 问题出在 userlist 路径中 我们是
  • C# html-helper 扩展现有方法而不覆盖?

    我已经搜索过这个问题并发现可能answer https stackoverflow com questions 11232041 how to create an html helper to extend textboxfor to ad
  • 如何用css3和html5制作不规则形状的div?

    我想知道是否有可能构建具有不规则形状的 div 类似于此 例如格陵兰岛 欧洲 非洲 我想使用 CSS3 和 HTML5 创建像这里这样的地图 以下是示例图像的链接 你所拥有的看起来像一个网格 你可以通过一个 div 上的许多渐变来获得它 也
  • jQuery 问题:它的真正含义是什么?

    function window undefined jquery code jQuery window 它到底意味着什么 是不是也意味着 document ready 或者只是两种不同的东西 已经有两个答案 但这是我对代码缺失端的猜测 fu
  • Bootstrap 3 - 使用垂直滚动条水平拖动元素,overflow-y:滚动

    在我的失败之后上一篇文章 https stackoverflow com questions 23586926 bootstrap grid with scrollable affixed column noredirect 1 comme
  • 为什么响应式图像需要“高度:自动”?

    是否有必要定义height auto现在 原因是什么 img max width 100 height auto Thanks 在没有明确设置高度尺寸的图像上 它实际上默认为自动高度 所以如果你设置max width 100 高度将由浏览器
  • 盒子大小是否可在电子邮件模板中使用

    我正在创建电子邮件模板 我发现了这个CSS 支持指南 https www campaignmonitor com css but box sizing不在那儿 我想知道是否支持该 CSS 属性 如果支持 哪些电子邮件客户端支持它 不 不支持
  • CSS - 在 id 中选择类的语法

    通过类名选择 id 中的标签的选择器语法是什么 例如 我需要在下面选择什么才能使内部的 li 变成红色 ul li Level 1 item ul class navigat ul li ul
  • JQuery _renderItem 没有被调用

    我正在尝试使用 renderItem 函数创建自定义 ui menu item 元素 但经过可能尝试后 我什至无法调用该函数 自动完成功能正在工作 但就像 renderItem 函数不存在一样 这是我的脚本部分
  • html输入数字,min + step,使step忽略min?

    是否有可能使step忽略min属性
  • NodeJS 中的缩进多行日志记录

    我要打印JSON stringify d 反对控制台 将上下文作为 Mocha 测试套件输出的一部分 当测试缩进时 我希望对象日志行向右缩进足够远 例如 3 4 个制表符空格 以便它们可以识别地位于右侧describe group 我怎样才
  • 如何在 Astro 中的组件之间共享状态?

    我相信我在代码中采用了错误的方法 如何在按钮单击中设置客户端首选项 该按钮单击用作全局 astro 组件中的道具 或者我应该怎么做 我知道这是可能的 因为 astro js 本身在他们的文档网站中这样做了 下面是我的尝试的解释 我目前正在开
  • jVectorMap - 向下钻取地图 - 自定义背景

    我正在使用 jVectorMap 中的向下钻取地图 并且尝试将自定义背景颜色设置为地图的第二层 为了自定义主级别 我使用 main 参数 但我不知道如何将其扩展到地图的较低级别 提前致谢 马切伊 None
  • 使用重复模式捕获正则表达式

    我试图捕获字符串的所有部分 但我似乎无法正确处理 该字符串具有以下结构 1 22 33 中间有运算符的数字 可以有任意数量的术语 我想要的是 1 22 33 1 22 33 但我得到 1 22 33 22 33 我尝试过各种正则表达式 这是
  • 在64位环境中加载32位进程

    我有以下几个问题 CHM 是 编译的 HTML 文件 我的 CHM 文件有一个启动 32 位应用程序的链接 CHM 文件是用 Javascript 编码的 这在 32 位操作系统环境中运行良好 但这在 64 位操作系统环境中不起作用 原因是
  • 为什么对于整数键,“Map”操作比 JavaScript (v8) 中的“Object”慢得多?

    我很高兴使用Map对于在我的 JavaScript 代码库中随处访问的索引 但我刚刚偶然发现了这个基准 https stackoverflow com a 54385459 365104 https stackoverflow com a
  • 如何制作饼图聚合数据源?

    Using 适用于 ASP NET MVC 的 Kendo UI 完整版 http www kendoui com 版本 2013 3 1119 2013年11月20日 如果我有这段代码 status chart kendoChart da

随机推荐