Javascript .css（）函数不使用'；不要将任何属性设置为任何元素

我对jQuery函数有一个问题：.css（）

这是我的HTML代码：

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

我尝试了各种可能的组合，但这根本不起作用。我尝试了所有可能的.css（）方法的synthax，但没有结果。 我还尝试将.css（）func、other方法中的其他属性应用于$（“#about”）对象，作为DOM就绪时的.click或.fadeOut（），但没有结果

我的环境是一个使用Yeomann、Grunt和Angular.js构建的项目。我担心Angular会干扰我正在构建的函数，但我觉得这很奇怪，因为其他HTML元素上的.click（）方法正在工作（例如，我可以将.addClass（）添加到元素）

---

有人知道这个问题吗？

当您应该设置维度时，您正在设置一个数字

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

将返回一个数字，假设它返回

42

但是，当您设置css属性时，不能只设置一个数字，您需要设置一个维度，如

42px

所以，试着这样做：

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

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

香草JS

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

}

我通常不使用jQuery，所以如果这不能解决问题，我建议让jQuery成为一个简单的Javascript（更简单、更快）

代码不正确。。这一定是控制台中出现错误。请检查。 有2个函数，只有1个函数具有右括号“}”。另一个内部功能未正确关闭

你可以试试这个

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

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

---

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

胡乱作答

html

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

CSS

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

}

---

希望这就是您要查找的内容。

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

您应该使用更多的角度特性和更少的Jquery内容。 无论如何，可以使用ng init找到一个解决方案

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

---

输入时可能只是一个问题，但您的JS代码无效并将抛出错误。问题中的代码可以正常工作（Adam提到的语法问题除外）。在浏览器控制台中查找错误，仔细检查您的代码是否没有上述输入错误，等等。运行代码时元素是否存在？例如，它是否位于

ng视图

或

ng include

中？您是否检查过实时thml以查看是否正在进行内联更改？请创建复制的演示problem@Andrea贾切托回答说，请看一看，jquery处理这个问题。如果您为我编辑答案的提示传递一个int-valueThx，jquery将不会自动处理px。@Bolza当问题很可能与在angular上使用jquery连接时，为什么要尝试从问题中删除angular标记？让它成为一个破坏性的编辑，请更多careful@AndreaGiachetto我想是的，真正的原因是DOM操作应该使用一个指令来完成，而不是在页面控制器内部。无论如何，我发布了一个新的答案，我希望它能起作用。

$（OP中的function（）{

与

$（document）是一样的。ready（function（）{

    $(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 );

})

*/

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

}

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

(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';
            }
    }
})();