Question

我正在尝试创建一个剪切窗口，但它没有发生，这里是代码示例：

<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>

Answer 1

您可能需要将要放置的元素的position属性设置为absolute或relative（例如ds.style.position = "relative";）。 left属性对静态定位的元素没有任何影响。

此外，您可能需要使用"500px"而不是数字500。

Answer 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

Answer 3

你必须将css属性“left”设置为一个值和一个测量值，例如“500px”（你忘记了px）

使用javascript定位div的背景图像

3 个答案: