Question

我已经做了一段时间的Java并且正在进行Web开发 - 但是我遇到了一些麻烦，我的代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">

    var getHeight = function() {

        return $(window).height();

    }

</script>

我想在这里获得窗口的高度，

img.pos_fixed {

        position:fixed;
        top:getHeight() / 2;
        right:250px;

    }

但它不会显示在屏幕中间。我很新，所以请不要抨击我应该学习html / javascript / css，因为我已经是。

Answer 1

您正在尝试从css调用javascript函数。

相反，你必须在javascript中设置css：

var obj= document.createElement('img');
obj.style.top = getHeight() / 2 ;

Answer 2

您可以关闭jquery脚本标记

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>

并使用纯css

img.pos_fixed {
    position:fixed;
    top:50%;
    right:250px;
}

修改

替代JavaScript，您应该等待document.ready -

$(document).ready(function() { $("img.pos_fixed").css('top','50%'); // same css });

Answer 3

我会做这样的事情：

$("img.pos_fixed").css({ 'position': 'fixed', 'top': '50%', 'right': '250px' });

Answer 4

您应该将jquery库包含在这样的单独脚本标记中。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

然后将您的jquery代码写在另一个脚本标记中。

<script type="text/javascript">
    var getHeight = function(){
        return $(window).height();
    }
    var img_height = getHeight/2;
</script>

您可以从脚本本身设置CSS。

<script type="text/javascript">
    $("img.pos_fixed").css('top',img_height);
</script>

您可以将其余样式放在样式标记中。

<style>
    img.pos_fixed {
        position:fixed;
        right:250px;
    }
</style>

Answer 5

首先，您无法在javascript代码中使用css函数。但您可以使用css更改元素的任何jquery/javascript。如果您想将image放在屏幕中间，而不是css。无需使用javascript。

<img class="middle_img" src="https://www.ourkidssports.com/js/tiny_mce/plugins/imagemanager/football_public_domain.jpg" alt="football">
<style type="text/css">
    .middle_img{
        height:100px;
        width:100px;
        position:fixed;
        top:50%;
        left:50%;
    }
</style>

这里是jsfiddle链接：http://jsfiddle.net/banded_krait/Cv3ny/

注意：position:fixed;会将图像修复到屏幕上。如果您滚动页面，它将不会滚动。

如何在html中获取JavaScript函数

5 个答案: