使用javascript定位div的背景图像
Posted
技术标签:
【中文标题】使用javascript定位div的背景图像【英文标题】：positioning background image of div using javascript 【发布时间】：2012-09-17 10:31:46 【问题描述】：我正在尝试制作一个剪辑窗口，但它没有发生，这里是代码示例：
<html>
<head>
<style>
#clippingWindow
height:178px;
width:278px;
overflow: hidden;
#bgImg
left:35px;
border:54px;
</style>
<script language="javascript">
function getImgSize()
var ds = document.getElementsByName('a');
var wid = ds[0].width;
var pos = (wid-278)/2;
alert(pos);
alert(ds[0].id);
if(ds[0].width>278)
dt.style.left=500; //this is not working
</script>
</head>
<body><input type="button" onClick="getImgSize();">
<div id="clippingWindow">
<img name="a" src="sss.bmp" id="bgImg">
</div><br><br><br>
<div id="ad">
<img name="a" src="484.jpeg">
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：您可能需要将要定位的元素的position 属性设置为absolute 或relative（例如ds.style.position = "relative";）。 left 属性对静态定位的元素没有任何影响。
另外，您可能需要使用"500px" 而不是数字500。
【讨论】：
存在 javascript 错误“'style' is null or not an object”【参考方案2】：我看到三个问题：
dt.style.left=500; 应该是 ds.style.left=500; (but see point #3)
您需要定位您的#bgImg 元素。例如：position:relative;
大多数浏览器应该可以使用ds.style.left=500; 行中的 500 单元，但 dts.style.left='500px'; 会更好。
jsFiddle example
【讨论】：
仍然无法正常工作... 出现 javascript 错误“'style' is null or not an object” @BharatSoni - 您是否在 jsFiddle 或您的网站上遇到了该错误？ 因此，如果它在小提琴中工作但不在您的网站上，那么一定有其他代码在干扰。 我想根据图片的宽度动态裁剪图片....如果您有更好的解决方案，请给我...。或者请修复此代码... machine happy #latest 类别下...这里我想用这个东西【参考方案3】：您必须将 css 属性“left”设置为一个值和一个测量值，例如“500px”（您忘记了 px）
【讨论】：
以上是关于使用javascript定位div的背景图像的主要内容，如果未能解决你的问题，请参考以下文章