jquery windows 宽度计算答案

【问题标题】：jquery windows widthcalculationjquery windows 宽度计算
【发布时间】：2015-07-31 19:47:18
【问题描述】：

我有一个导航栏，它给了他一个“nav-oferta24”类，如果它在“宽度 > 992”中，我需要你放置一个类 navbar-inverse，但如果不是，则放置 navbar-default

我的代码：

<nav class="navbar navbar-inverse nav-oferta24">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">                                 
                <li><a href="#" class="no-margin">¿Qué es la oferta del día?</a></li>               
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li class="no-margin no-padding">
                    <a href="#" class="no-margin">
                        <span class="m-r-5">
                            <i class="pg-shopping_cart bg-icon-oferta24h"></i>
                        </span>
                        2 Producto(s)<b><span class="text-naranja m-l-10">56,99€</span></b>
                    </a>
                 </li>
            </ul>

            <ul class="nav navbar-nav center-nav">
                <li class="b-r no-margin no-padding"><a href="#" class="no-margin">Atencion al cliente</a></li>
                <li class="b-r no-margin no-padding"><a href="#" class="no-margin">902 00 55 55</a></li>
                <li><a href="#" class="no-margin">Contáctanos</a></li>
            </ul>


        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

【问题讨论】：

标签： jquery html twitter-bootstrap css navbar

【解决方案1】：

我并没有真正看到 javascript/jquery 代码。无论如何，这是我计算窗口高度和宽度的方法：

var scw = document.documentElement.clientWidth; // This is screen Width
var sch = document.documentElement.clientHeight;  // this is screen Height

https://jsfiddle.net/cxaLgg9z/

jsfiddle.net 模拟屏幕，所以它不会显示你的真实屏幕高度和宽度，但它适用的窗口:) 所以尝试在你的计算机上运行它 - 它会显示真实的 W 和 H。

【讨论】：

我希望这是计算其他元素的其他宽度和高度的良好开端？...

【解决方案2】：

使用 jquery，您可以这样做：

$().ready(function() {
    if ($('.nav-oferta24').width() > 992) {
         $('.nav-oferta24').addClass('navbar-inverse');
    } else {
         $('.nav-oferta24').addClass('navbar-default');
    }
});

这显然可以清理。但这会完成你想要的。

Heres 一个工作小提琴

【讨论】：