首页 > 软件开发 > JavaScript >

javascript 如何添加div标签并调整样式

来源:互联网 2023-03-16 23:58:23 450

本经验介绍编写javascript时,如何添加div标签并调整其样式。应用场景比如在控制台输入额外代码给页面增加功能。VSV办公区 - 实用经验教程分享!

javascript 如何添加div标签并调整样式VSV办公区 - 实用经验教程分享!

工具/原料

  • Firefox

方法/步骤

  • 1

    首先,要创建标签,使用document.createElement函数,如图创建div标签。VSV办公区 - 实用经验教程分享!

    使用其className设置class,id设置id,style设置样式。VSV办公区 - 实用经验教程分享!

    javascript 如何添加div标签并调整样式VSV办公区 - 实用经验教程分享!

  • 2

    样式的设置也可以分项进行。如图是分项设置其left,top,display,position,width几个样式。VSV办公区 - 实用经验教程分享!

    javascript 如何添加div标签并调整样式VSV办公区 - 实用经验教程分享!

  • 3

    通过设置标签的innerHTML属性可以直接给其添加子标签以及子标签的样式。VSV办公区 - 实用经验教程分享!

    当然,也可以分项分层添加标签。VSV办公区 - 实用经验教程分享!

    javascript 如何添加div标签并调整样式VSV办公区 - 实用经验教程分享!

  • 3此文章非法爬取自百度经验
  • 4

    设置好标签(如图是div标签,变量名box),使用document.body.appendChild添加标签到body当中。VSV办公区 - 实用经验教程分享!

    javascript 如何添加div标签并调整样式VSV办公区 - 实用经验教程分享!

  • 5

    标签添加以后,依然可以修改样式,如图是使用document.getElementById方法根据id获取标签,修改style。VSV办公区 - 实用经验教程分享!

    javascript 如何添加div标签并调整样式VSV办公区 - 实用经验教程分享!

  • 6

    标签添加以后,也可以给其添加和删除event处理。如图是使用jQuery给id为img-preview-box的标签添加hover鼠标经过的处理。VSV办公区 - 实用经验教程分享!

    javascript 如何添加div标签并调整样式VSV办公区 - 实用经验教程分享!

  • 注意事项

    • 用Js添加其它类型标签同理,只需要create的时候,把"div"换成其它标签名称即可。

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


    标签: JAVASCRIPT

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