Javascript将浏览器视口大小输出到body CSS中

Javascript get browser viewport size an output into body CSS

本文关键字：body CSS 输出 浏览器 视口 Javascript      更新时间：2023-09-26

我使用Andy Langton javascript来获取我的viewport大小。如果你没听说过，请看下面的链接。

http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

脚本工作，但我不确定如何最好的方式来让脚本输出'宽度'和'高度'到我的身体CSS，或任何其他CSS选择器的事。

参见下面我蹩脚的尝试，尽管我认为我在jQuery中混合是错误的

<script>
    <!--
    var viewportwidth;
    var viewportheight;
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
    if (typeof window.innerWidth != 'undefined')
    {
        viewportwidth = window.innerWidth,
        viewportheight = window.innerHeight
    }
    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    else if (typeof document.documentElement != 'undefined'
        && typeof document.documentElement.clientWidth !=
        'undefined' && document.documentElement.clientWidth != 0)
    {
        viewportwidth = document.documentElement.clientWidth,
        viewportheight = document.documentElement.clientHeight
    }
    // older versions of IE
    else
    {
        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    }
    $(document).ready(function() {
        $("body").css({
            width   : "+viewportwidth+",
            height  : "+viewportheight+"
        });
    });
    //-->
</script>
谁能帮我解决这个难题?

如果有办法通过PHP标签将它添加到body html中，那也会很酷，看看下面我的例子…

<div style="width: <?php veiwportwidth(); ?>px; height: <?php veiwportheight(); ?>px;"> </div>

如果这是有意义的，不用担心，只是javascript位将是非常有帮助的。

你接近你的jQuery:

$( 'body' ).css( {
    'width'   : viewportwidth + 'px',
    'height'  : viewportheight + 'px'
} );

您还可以向DOM添加样式部分，这有助于类重用(但在本例中没有那么多):

演示:http://jsfiddle.net/ThinkingStiff/Pa9k3/

脚本:

var bodyStyle =
    'body'
    + '{'
    + 'width: ' + viewportwidth + 'px;'
    + 'height: ' + viewportheight + 'px;'
    + '}';
$( '<style />' ).append( 
    document.createTextNode( bodyStyle )
).appendTo( 'head' );

需要修改的是:

$("body").css({
    width   : "+viewportwidth+",
    height  : "+viewportheight+"
});

: 

$("body").css({
    "width"   : viewportwidth + "px",
    "height"  : viewportheight + "px"
});
相关文章：