使用javascript定位div的背景图像答案

【问题标题】：positioning background image of div using javascript使用javascript定位div的背景图像
【发布时间】：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>

【问题讨论】：

标签： javascript image positioning crop clipping

【解决方案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）

【讨论】：