JavaScript,不知道我在做什么

发布时间：2020-12-14 22:47:03 所属栏目：资源来源：网络整理

导读：我正在尝试使用JavaScript来设置相对于屏幕分辨率宽度的元素宽度.我会解释一下为什么我有这个图像：http://i.stack.imgur.com/HeXvu.png 我希望这是我的标题,我不希望它是一个完全静态的图像,我希望标题与屏幕分辨率一致,所以我设置我的CSS和HTML这样的东西

我正在尝试使用JavaScript来设置相对于屏幕分辨率宽度的元素宽度.我会解释一下为什么……我有这个图像：http://i.stack.imgur.com/HeXvu.png

我希望这是我的标题,我不希望它是一个完全静态的图像,我希望标题与屏幕分辨率一致,所以我设置我的CSS和HTML这样的东西……

HMTL：


CSS：

#headerMain {
    height: 79px;
    background-image: url(../img/global/middleHeader.png);
    background-repeat: repeat-x;
}
.headerLeft {
    width: 63px;
    height: 79px;
    background-image: url(../img/global/leftHeader.png);
    background-repeat: no-repeat;
    float: left;
}
.headerRight {
    width: 63px;
    height: 79px;
    background-image: url(../img/global/rightHeader.png);
    background-repeat: no-repeat;
    float: right;
}

现在,我在这里要做的是,为头部的左右固化部分预定义宽度和高度,并使用初始标题div(中间图像设置为背景).我在这里遇到的唯一问题是这个,主div的背景(一个带有标题的中间部分),显示在图像后面是标题的右曲线,如下所示：http://i.stack.imgur.com/XEq85.png
我该如何解决这个问题？我能想到的一种方法是使用JavaScript.这就是我的想法,首先脚本使用“screen.width”获取用户屏幕宽度,然后从值(标题的右弯曲部分的宽度)中减去“63”,并将该值设置为主标题元素的宽度,理论上应该解决背景问题.唯一的问题是,我几乎没有JavaScript经验而且不知道如何做任何事情,我知道我做的一些事情的唯一原因,主要是因为我已经复制/粘贴了一些其他JS代码我的页面…是的很糟糕.那么,我该怎么办？ O_O


最佳答案
您可以尝试从headerMain div中取出左右标题div并将它们放在DOM中的相同级别.然后使用这个修改过的CSS：

#headerMain { height: 79px; background-image: url(../img/global/middleHeader.png); background-repeat: repeat-x; position:absolute; top:0px; left:63px; right:63px;} 

.headerLeft { width: 63px; height: 79px; background-image: url(../img/global/leftHeader.png); background-repeat: no-repeat; position:absolute; top:0px; left:0px;} 

.headerRight { width: 63px; height: 79px; background-image: url(../img/global/rightHeader.png); background-repeat: no-repeat; position:absolute; top:0px; right:0px;}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!