0

我倾向于划分width = window.innerWidth; height = width/5;
1/5 实际上是背景图像的高度/重量比。所以我写了如下代码。

HTML：

<!DOCTYPE HTML>
<HTML>
<HEAD>
    <TITLE>FORM</TITLE>
    <META CHARSET="gb2312" />
    <LINK REL="stylesheet" HREF="css/style.css" />
    <SCRIPT TYPE="text/javascript">
        function onload(){

            //innerWidth of the window 
            var window_innerWidth;
            //height of DIV#head
            var head_height;
            //DIV#head
            var head_div;
            //btn
            var left_btn;

            window_innerWidth=window.innerWidth;
            head_height=window_innerWidth*120/600;
            head_div=document.getElementById("head");
            left_btn=document.getElementById("head_left_btn");
            right_btn=document.getElementById("head_right_btn");

            if(head_div&&left_btn){
                head_div.width=window_innerWidth;
                head_div.height=head_height;


                alert(window_innerWidth+ " " +head_height + " " + head_div.height 
                    + " " + left_btn.height);

            }

        }
    </SCRIPT>

</HEAD>
<BODY onload="onload();">
    <DIV ID="head">
        <BUTTON ID="head_left_btn" class="btn_hide" TYPE="button"></BUTTON>
        <BUTTON ID="head_right_btn" class="btn_hide" TYPE="button"></BUTTON>
    </DIV>

</BODY>
</HTML>

CSS：

#head{

background-image: url('../img/basic_.jpg');
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}


.btn_hide{

width: 49.5%;
height: 100%;
opacity: 0.5;
}

我用作背景的img是600px*120px

我正在做的是尝试制作一个头部标签。问题是，虽然分割的宽度与 javascript 正确，但高度却没有。尽管 alert 的输出显示高度的值是正确的，但页面的显示却不是。有人可以在这里帮忙吗？非常感谢！

4

1 回答 1

0

尝试这个：

head_div.style.height = head_height + "px";
于 2012-08-30T05:11:01.950 回答