首页 > 软件开发 > HTML >

js怎么获取背景图片的宽度

来源:互联网 2023-03-16 19:16:38 版权归原作者所有,如有侵权,请联系我们

js怎么获取背景图片的宽度YSY办公区 - 实用经验教程分享!

js怎么获取背景图片的宽度YSY办公区 - 实用经验教程分享!

工具/原料

  • js
  • visual studio code

方法/步骤

  • 1

    打开vscode ,创建一个的文件YSY办公区 - 实用经验教程分享!

    js怎么获取背景图片的宽度YSY办公区 - 实用经验教程分享!

  • 2

    更改文件类型为htmlYSY办公区 - 实用经验教程分享!

    js怎么获取背景图片的宽度YSY办公区 - 实用经验教程分享!

  • 3

    完成html的结构YSY办公区 - 实用经验教程分享!

    js怎么获取背景图片的宽度YSY办公区 - 实用经验教程分享!

  • 4

    接着创建一个背景YSY办公区 - 实用经验教程分享!

    运行后的效果YSY办公区 - 实用经验教程分享!

    js怎么获取背景图片的宽度YSY办公区 - 实用经验教程分享!

    js怎么获取背景图片的宽度YSY办公区 - 实用经验教程分享!

  • 5

    这张图片的分辨率为325*276YSY办公区 - 实用经验教程分享!

    js怎么获取背景图片的宽度YSY办公区 - 实用经验教程分享!

  • 5此文章未经许可获取自百度经验
  • 6

    下面开始写js来获得它的宽高了YSY办公区 - 实用经验教程分享!

    我们背景图片是使用的样式,所以js没有办法直接取得

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

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

    需要通过getComputedStyle来获得YSY办公区 - 实用经验教程分享!

    js怎么获取背景图片的宽度YSY办公区 - 实用经验教程分享!

  • 7

    得到style后,style.backgroundImage就是背景图片的路径YSY办公区 - 实用经验教程分享!

    但是这个时候还是没办法获得宽高YSY办公区 - 实用经验教程分享!

    我们需要创建一个img来加载YSY办公区 - 实用经验教程分享!

    js怎么获取背景图片的宽度YSY办公区 - 实用经验教程分享!

  • 8

    运行之后就可以看到效果了YSY办公区 - 实用经验教程分享!

    js怎么获取背景图片的宽度YSY办公区 - 实用经验教程分享!

  • 注意事项

    • 完整的代码:https://github.com/MulderLiu/jingyan.baidu/tree/master/js怎么获取背景图片的宽度

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


    标签: HTML

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