Блог

Главная - Вопросы по программированию - Позиционирование img с помощью javascript: оно не будет перемещаться

Позиционирование img с помощью javascript: оно не будет перемещаться

#javascript #html #css

#javascript #HTML #css — файл #css

Вопрос:

У меня есть некоторый javascript для установки атрибута offsetLeft элемента img. Но мой javascript не перемещает HTML-элемент, как вы думаете, что я могу сделать, чтобы заставить его двигаться влево? Это сценарий, когда мне проще всего расположить элемент в javascript, а не в css.

Изображение, которое не перемещается влево, когда должно (оно отображается по центру), имеет идентификатор «headerImg»:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Kamalei - Home Page</title>
    <style type="text/css">
    <!--
        body { text-align: center; min-width: 1200px; }

        #backgroundImg  { z-index: -1; position: absolute; left: 0px; top: 0px; }

        #heading        { height: 300px; }
        #main           { margin: 0 auto; }
        #navBar         { display: inline; height: 700px; width: 200px; z-index: 1; position: relative; } 
        #content        { display: inline; height: 700px; width: 800px; padding: 20px; padding-left: 30px; }

        #headingImg     { left: 0px; }
        #navBarImg      { position: relative; z-index: 0; padding-right: -5px; margin-right: -5px; }
    -->
    </style>

</head>

<body>

    <div id="heading"> 
        <!-- This image will not move to the left when I call the below javascript -->
        <img id="headingImg" src="images/logoWritting.png" alt="Kamalei Childrens Centre" width="600px" height="240px"/>
    </div>

    <div id="main">
        <div id="navBar">
            <img id="navBarImg" src="images/navBackground.png" alt="" width="200px" height="700px"/>
        </div>

        <div id="content">
        </div>
    </div>


    <img id="backgroundImg" src="images/background.png" alt="" width="100%" height="1100px"/>

    <script type="text/ajavscript">
    <!--
        var CONTENT_WIDTH = 1000;

        function getScreenSize()
        {
            var res = {"width": 630, "height": 460};

            if ( parseInt(navigator.appVersion)>3 ) 
            {
                res["width"]  = screen.width;
                res["height"] = screen.height;
            }
            else if ( navigator.appName == "Netscape" amp;amp; parseInt(navigator.appVersion)==3 amp;amp; navigator.javaEnabled() ) 
            {
                 var jToolkit    = java.awt.Toolkit.getDefaultToolkit();
                 var jScreenSize = jToolkit.getScreenSize();
                 res["width"]  = jScreenSize.width;
                 res["height"] = jScreenSize.height;
            }

            return res;
        }

        document.getElementById("headingImg").style.left     = ((getScreenSize()['width']/2)-(CONTENT_WIDTH/2)) "px";
    -->
    </script>
</body>

</html>

Ответ №1:

Установите .style.left вместе с position:absolute , а не offsetLeft . В качестве альтернативы измените .style.marginLeft . offsetLeft является свойством, доступным только для чтения.