Question

我遇到了jQuery函数的问题：.css（）

这是我的HTML代码：

<div class="..." id="about">
// OTHER HTML CODE
</div>

这是我的jQuery代码：

(function($, window, document) {

    $(function() {

        var viewportHeight = $(window).height();

        $('#about').css( "margin-top" , viewportHeight );

}(window.jQuery, window, document));

我已经尝试了所有可能的组合，但这并不是以任何方式工作。我已经尝试过.css（）方法的所有可能的synthax而没有结果。我还尝试将.css（）func中的其他属性，其他方法应用于$（＆＃39;＃about＆＃39;）对象作为.click或.fadeOut（），当DOM准备就绪时，没有结果。

我的环境是由Yeomann，Grunt＆amp; Angular.js。我担心Angular会干扰我构建的功能，但这对我来说似乎很奇怪，因为其他HTML元素上的.click（）方法正常工作（例如我能够.addClass （）到元素）。

有人知道这个问题吗？

Answer 1

至于评论，jquery很可能无法获取该元素，因为该元素在该特定时刻不存在。

你应该使用更多的Angular特性和更少的Jquery东西。无论如何，可以使用ng-init

找到一个解决方案

<div ng-controller="AboutController">
    <div class="..." id="about" ng-init="measure()">
    // OTHER HTML CODE
    </div>
</div>

然后在AboutController或任何包装你的about元素的控制器中你可以使用你喜欢的任何代码，我将使用普通的JS版本

(function () {
    'use strict';

    angular
        .module('app') //whatever module you're using
        .controller('AboutController', tcController);

        tcController.$inject = ['$scope', '$window'];
        /* @ngInject */
        function tcController($scope, $window) {

            $scope.measure = function() {
                var viewportHeight = $window.height();
                document.querySelector('#about').style.marginTop = viewportHeight + 'px';
            }
    }
})();

Answer 2

您应该在设置尺寸时设置一个数字。

var viewportHeight = $(window).height();

将返回一个数字，让它说它返回42

但是当你设置一个css属性时，你不能只设置一个数字，你需要设置像42px这样的维度。

所以试试这个：

$('#about').css( "margin-top" , viewportHeight + 'px' );

这也是为什么你没有得到任何JS错误，JS基本上是正确的，问题出在CSS属性中，当css属性错误时，浏览器会忽略它。

Vanilla JS

我通常不会使用jQuery，所以如果这并没有解决问题，我建议让jQuery使用普通的Javascript（更简单，更快）。

document.getElementById('about').style.marginTop = viewportHeight + 'px';

Answer 3

你的Jquery代码中有错误，更好的设置高度的方法是在document.ready（）方法中编写代码。

摆弄答案here

<强> HTML

<div class="..." id="about">
// OTHER HTML CODE
</div>

<强>脚本

    $(function() {

        var viewportHeight = $(window).height();

        $('#about').css( "margin-top" , viewportHeight );

    });

/* another better solution
$(document).ready(function(){
        var viewportHeight = $(window).height();

        $('#about').css( "margin-top" , viewportHeight );

})

*/

<强> CSS

#about{
    background:red;
    width:100%;

}

希望这就是你要找的东西

Answer 4

 (function($, window, document) {

    $(function() {

        var viewportHeight = $(window).height();

        $('#about').css( "margin-top" , viewportHeight );

}(window.jQuery, window, document));

代码不正确..这必须在console.kindly检查中给出错误。有2个功能，只有1个功能具有关闭打击器“}”。另一个内部功能未正确关闭。

你可以试试这个

$(document).ready(function(){
var viewportHeight = $(window).height();

        $('#about').css( "margin-top" , viewportHeight );
});

.css（）函数不会为任何元素设置任何属性

4 个答案: