javascript如何比较像素的大小？html

JavaScript033

javascript如何比较像素的大小？html,第1张

<script type="text/javascript">

window.onload = function(){

var width = document.getElementById("abc").style.width

var height = document.getElementById("abc").style.height

var big = Math.max(parseInt(width), parseInt(height))+'px'

//document.write(Math.max(parseInt(width), parseInt(height)))

document.getElementById("abc").style.backgroundSize = big+" "+big

}

</script>

利用鼠标上移、移动、移出事件来控制图片的展示，实现两图对比

这个也可以用于图片的遮罩、虚化等处理

[demo展示中心]： https://yomonah.github.io/project/app.html#/location

[源码]： https://github.com/yomonah/react-demo/tree/master/src/components/picture

方法一：获取图片的宽高。可以用offsetWidth和offsetHeight

方法二：

你先获取img标签标签元素。用getElementById()或者getElementsByClassName或者getElementsByTagName()都可以。

获取之后，如果你的img图片有width和height 属性，可以直接用img元素对象点属性

document.getElementsByTagName("img")[0].width

document.getElementsByTagName("img")[0].height

3.如果img元素本身没有width和height属性。你可以获取img元素的style样式

function getStyle(obj,attr){

return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]

｝；

obj是你的img标签对象，attr是你的想要获取的属性；

currentStyle支持IE低版本浏览器，

getComputedStyle支持主流浏览器