Question

在JS中我想动态地将标题的宽度设置为一定量的像素，具体来说我希望标题宽度大于加载文档和调整窗口大小时窗口的宽度。

HTML：

<nav>
    <a href="#" id="menu-icon"></a> <!-- Logo container -->

    <ul> <!-- Navigation menu bar options. These are fixed in terms of content. -->
        <li><a href="#">My Profile</a></li>
        <li><a href="#">Log Out</a></li>
        <li><a href="#">FAQs</a></li>
        <li><a href="#contactus">Extras</a></li>
  <li><a href="#contactus">Contact Us</a></li>          
    </ul>

</nav>

CSS：

header {
    background-color: #3366FF;
    min-width: 660px;
    width: 100%;
    height: 86px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    opacity: 0.90%;
}

#logo {
    margin: 0px;
    float: left;
    width: 200px;
    height: 86px;
    background: url("../images/logo.png") no-repeat center;
}

nav {
    float: right;
    padding: 20px;
}

#menu-icon {
    display: hidden;
    width: 100px;
    height: 86px;
    background: url(http://www.w3newbie.com/wp-content/uploads/icon.png);
    padding: 0;
    margin: 0;
}   

a:hover#menu-icon {
    border-radius: 2px 2px 0 0;
}

ul {
    list-style: none;
}

nav ul li {
    text-align: center;
    display: inline-block;
    padding: 10px;
}

nav ul li a:hover {
    color: #363636;
    text-decoration: none;
}

Answer 1

不需要javascript。

这是一种非常简单的方法，可以将元素渲染到其自然块流之外，实现我理解你要寻找的东西。使用填充推出方式，并以负边距向后拉。兄弟元素通常符合流量。

.structure{
  width:100%;
  overflow:hidden;
}

header {
  margin-left:-999em;
  padding-left:999em;
  margin-right:-999em;
  padding-right:999em;
  background-color:pukegreen;
}

*请注意，某些结构元素需要隐藏溢出。

这里是fiddle

Answer 2

如果你坚持使用JavaScript，你可以用jQuery做这样的事情。

$("header").width($(window).width()+500)

我添加了一个显示原始css，此JavaScript和css示例的示例here。两个示例都使宽度比窗口宽度大500px。

CSS版本使用Calc将其扩展500px超过100％。

width: calc(100% + 500px);

我做了500px的事情，因为你说“将标题的宽度设置为一定的像素数”。如果你刚才说过，那么我会建议使用类似width: 500px;的东西，但你也说过“我希望标题宽度大于窗口宽度”。如果你遗漏了第一部分而不是我建议像width: 150%;那样的东西。

在JS中动态设置标题的宽度

2 个答案: