positioning background image of div using javascript

Question

I am trying to make a clipping window but it is not happening, here is the code sample:

<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

You probably need to set the position property of the element you want to position to something like absolute or relative (eg ds.style.position = "relative"; ). The left property doesn't have any effect on statically positioned elements.

Also, you probably need to use "500px" instead of the number 500 .

Answer 2

I see three issues:

dt.style.left=500; should be ds.style.left=500; (but see point #3) ds.style.left=500; (but see point #3)
You need to position your #bgImg element. Ex: position:relative;
Most browsers should be OK with your 500 unit in the line ds.style.left=500; however dts.style.left='500px'; would be better.

jsFiddle example

Answer 3

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

positioning background image of div using javascript

Question

3 answers

solution1
2 2012-09-25 20:56:09

solution2
1 2012-09-25 21:01:31

solution3
0 2012-09-25 20:55:05

positioning background image of div using javascript

Question

3 answers

solution1 2 2012-09-25 20:56:09

solution2 1 2012-09-25 21:01:31

solution3 0 2012-09-25 20:55:05

solution1
2 2012-09-25 20:56:09

solution2
1 2012-09-25 21:01:31

solution3
0 2012-09-25 20:55:05