js获取背景图片宽高比后根据浏览器宽度动态赋值div.style.height

代码大致如下供参考：

var image=new Image();

imagesrc=//你的背景的src;

var divelement = documentgetElementById(你的div的id);

divelementstyleheight=(imageheightdivelementoffsetWidth)/imagewidth + "px";

几个需要注意的地方是imagesrc=xxx后需要等待直到下载完成。但是如果这个脚本是在你的div已经初始化好之后调用的话，那么已经被下载过了，所以直接进行后面的就好。另外以styleheight来设置高度的话后面需要加单位，比如px

一、途径：

第一种情况就是宽高都写在样式表里，就比如#div1{width:120px;}。这中情况通过#div1stylewidth拿不到宽度，而通过#div1offsetWidth才可以获取到宽度。

第二种情况就是宽和高是写在行内中，比如style="width:120px;"，这中情况通过上述2个方法都能拿到宽度。

二、小结：

因为idoffsetWidth和idoffsetHeight无视样式写在样式表还是行内，所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过idstyleatrr来获取。

三、代码：

var o = documentgetElementById("view");

var h = ooffsetHeight; //高度

var w = ooffsetWidth; //宽度

参考资料

js获取Html元素的实际宽度高度的方法脚本之家[引用时间2017-12-29]

一般来说在移动浏览器上是拿不到屏幕真实分辨率的，因为页面渲染是在一个叫viewport的页面绘制区域内（说的通俗点就是手机浏览器是用一个虚拟的屏幕来显示网页的）。viewport和屏幕的真实尺寸并不是对应的，如在Safari Mobile中viewport默认宽度（320px）是屏幕真实尺寸（640px）的一半，这里不管是用windowinnerHeight还是windowscreenwidth拿到的都是320px。当然我们可以通过meta设置改变viewport的比例，如initial-scale=5就可以让viewport和屏幕一致的尺寸，但这个比例在不同的手机上并不一定是2倍关系，特别是Android手机，在大屏手机（5寸以上）上这个值是3倍甚至4倍。而且改变viewport比例后可能会导致后续制作中出现一系列问题。所以我认为不要纠结一定要拿到屏幕真实尺寸，就把viewport的尺寸当成屏幕的尺寸进行页面设计和制作肯定是没有问题的。

有一个非常曲线的解决办法，就是：css的媒体查询（@media）是能够检测屏幕尺寸（其实是浏览器窗体的真实尺寸，并不是屏幕的真实物理尺寸，介意的朋友就不要看了）的，通过它来给网页内的某个元素设置一个特殊的属性，然后再用JavaScript来获取这个属性值。当然这样只能获得一个阶梯值（比如480px到540px之间、540px到600px之间等等），不是精确值，所以可能得不偿失，因此我是不推荐的。

并没有getElementByClassName()这个函数，只有getElementsByClassName()，Element后面有个s，这个返回来是多个节点的集合（因为class名有可能匹配到多个），假设只有1个元素用这个class名，那么要改变宽度可以：

var a=documentgetElementsByClassName("a");

a[0]stylewidth="500px";

望采纳，谢谢

给你说下思路，

documentgetElementById("top")rowslength可以获得top表的行数

documentgetElementById("top")rows[0]cellslength可以获得top表的第一行的列数

documentgetElementById("top")rows[0]cells[0]offsetWidth可获得top表第一行第一列的实际宽度，（注意，这个是只读的！）

所以

for(var i=0;i<documentgetElementById("top")rows[0]cellslength;i++)

{

documentgetElementById("buttom")rows[0]cells[i]width=documentgetElementById("top")rows[0]cells[i]offsetWidth;

}

希望对你有帮助！

以上就是关于js获取背景图片宽高比后根据浏览器宽度动态赋值div.style.height全部的内容，包括:js获取背景图片宽高比后根据浏览器宽度动态赋值div.style.height、jQuery获取HTML元素“div”的宽度：$("div").width()、用javascript 怎样才能很好的获取手机的屏幕宽度和高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！