html/CSS 如何获取图片的宽度? 下面本篇文章给大家介绍一下获取图片当前宽高的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
在 HTML/CSS 中, 想要获取图片当前宽高可以使用 JavaScript clientWidth 和 clientHeight 属性来实现. clientWidth,clientHeight 属性表示获取图像的当前宽度和高度.
下面我们就结合具体的代码示例, 给大家介绍 JS 获取图片当前宽高的方法.
代码实例如下:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="utf-8">
- <title>
- JS 获取当前图片宽高的示例
- </title>
- <script type="text/javascript">
- function imgSize() {
- var myImg = document.querySelector("#sky");
- var currWidth = myImg.clientWidth;
- var currHeight = myImg.clientHeight;
- alert("当前 width=" + currWidth + "," + "当前 height=" + currHeight);
- }
- </script>
- </head>
- <body>
- <img src="./1/png" id="sky" style="width:250px;">
- <p>
- <button type="button" onclick="imgSize();">
- 获取
- </button>
- </p>
- </body>
- </HTML>
当我们点击获取按钮时, 就会调用上述定义的 imgSize() 方法, 其中 querySelector() 方法可以获取文档中 id="sky" 的元素, 也就是获取的 img 图片. 然后通过. clientWidth 和 clientHeight 属性来获取元素的当前宽度和高度 (单位: 像素).
这里的 img 图片, 我们给它添加了一个 width 属性为 250px, 高度为自适应.
最终效果如下图所示:
注:
clientWidth 属性表示元素的内部宽度. 该属性包括内边距, 但不包括垂直滚动条 (如果有), 边框和外边距, 其属性值会被四舍五入为一个整数.
clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在) 来计算. 这个属性是只读属性, 对于没有定义 CSS 或者内联布局盒子的元素为 0, 否则, 它是元素内部的高度 (单位像素), 包含内边距, 但不包括水平滚动条, 边框和外边距.
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/html5/17252.html