js如何让input文字框向下移动指定距离

在js中,可以使用marginTop属性将input向下移动。下面小编举例讲解js如何让input文字框向下移动指定距离。

0da37be7340f6478140b5f0ffd3e21c2bad6b582.jpg?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1%2Fformat%2Cf_jpg%2Fquality%2Cq_80

东西/原料

  • 联想笔记本Air14
  • 操作系统Windows 10
  • zend studio10.0
  • html+js

方式/步调

  1. 1

    新建一个html文件,定名为test.html,用于讲解js如何让input文字框标的目的下移动指定距离 。

    e4b5e2f5ee0d3ace50f093dd87e265e7350fbb82.jpg?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1%2Fformat%2Cf_jpg%2Fquality%2Cq_80
  2. 1
  3. 2

    在test.html文件内,利用input标签建立一个文本框,用于测试。

    ef4c24ceaad7726bf0c58451bf0f64781523b982.jpg?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1%2Fformat%2Cf_jpg%2Fquality%2Cq_80
  4. 3

    在test.html文件内,设置input标签的id属性为wthree。

    fdb4f00d3aceaad7894ced54eee7340f6578b882.jpg?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1%2Fformat%2Cf_jpg%2Fquality%2Cq_80
  5. 4

    在test.html文件内,建立script标签,用于编写js代码。

    3b8fb4d7726b0ce298c0d5b9ef781423bfb9b682.jpg?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1%2Fformat%2Cf_jpg%2Fquality%2Cq_80
  6. 5

    在js标签内,经由过程id获得input对象,利用margin-top属性让input标的目的下移动40px。

    ab966c6b0ce265e7ca2885ce9f23beb9773eb782.jpg?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1%2Fformat%2Cf_jpg%2Fquality%2Cq_80
  7. 6

    在浏览器打开test.html文件,查看成果。

    732a12e265e7340f9b5ff59535b9763e20c2b482.jpg?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1%2Fformat%2Cf_jpg%2Fquality%2Cq_80END

总结:

  1. 1

    1、利用input标签建立一个文本框,设置input标签的id属性为wthree。2、在js标签内,经由过程id获得input对象,利用margin-top属性让input标的目的下移动40px。3、在浏览器打开test.html文件,查看成果。

    END
  • 发表于 2021-07-09 20:00
  • 阅读 ( 310 )
  • 分类:其他类型

相关问题

0 条评论

请先 登录 后评论