首页 > 软件开发 > HTML >

js中怎么更改transform的值

来源:互联网 2023-03-16 19:15:58 434

js中怎么更改transform的值,transoform是其中一种CSS样式,可以进行对图形或者文字旋转,如果我们要修改这个值,可以用JS,因为JS可以动态来修改,这样更加丰富页面的功能。mOn办公区 - 实用经验教程分享!

js中怎么更改transform的值mOn办公区 - 实用经验教程分享!

工具/原料

  • chrome浏览器
  • windows7
  • sublime text3

方法/步骤

  • 1

    打开sublime text3编辑器,新建一个HTML文档。mOn办公区 - 实用经验教程分享!

    js中怎么更改transform的值mOn办公区 - 实用经验教程分享!

  • 2

    建造一下HTML的基本架构。mOn办公区 - 实用经验教程分享!

    js中怎么更改transform的值mOn办公区 - 实用经验教程分享!

  • 3

    创建一个CSS文档,并且关联HTML文档。mOn办公区 - 实用经验教程分享!

    现在我们为DIV设置样式。mOn办公区 - 实用经验教程分享!

    js中怎么更改transform的值mOn办公区 - 实用经验教程分享!

    js中怎么更改transform的值mOn办公区 - 实用经验教程分享!

  • 4

    现在我们创建一个按钮,要求按钮按了以后图形会变形。mOn办公区 - 实用经验教程分享!

    js中怎么更改transform的值mOn办公区 - 实用经验教程分享!

    js中怎么更改transform的值mOn办公区 - 实用经验教程分享!

  • 5

    新建一个JS文档,并且关联HTML文档,再在BUTTON标签里面加入onclick="transform()"监听事件。mOn办公区 - 实用经验教程分享!

    js中怎么更改transform的值mOn办公区 - 实用经验教程分享!

  • 6

    function transform(){mOn办公区 - 实用经验教程分享!

    var tsf = document.getElementById("div");mOn办公区 - 实用经验教程分享!

    var degree = "15deg";mOn办公区 - 实用经验教程分享!

    tsf.style.transform = "rotate(" degree ")";mOn办公区 - 实用经验教程分享!

    }mOn办公区 - 实用经验教程分享!

    这个时候我们完善一下函数,现在点击一下就能更改transform的值了。mOn办公区 - 实用经验教程分享!

    js中怎么更改transform的值mOn办公区 - 实用经验教程分享!

    js中怎么更改transform的值mOn办公区 - 实用经验教程分享!

    js中怎么更改transform的值mOn办公区 - 实用经验教程分享!

  • 6本页面未经授权抓取自百度经验
  • 注意事项

    • 注意选择ID的时候名字要加上引号

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!mOn办公区 - 实用经验教程分享!


    标签: JAVASCRIPTHTML函数

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码