简单的jQuery CSS边距未生效

Question

这是一个非常简单的问题，但我很不熟悉JavaScript。我试图在document.ready和window.resize事件中使用JS为

元素添加margin-top属性，但没有成功。

function cent() {
    var blockheight = $("#block").height();
    var margintop = (blockheight / -2);
    $block.css("margin-top", margintop);                   
};

$(document).noConflict();
$(document).ready(cent);
$(window).resize(cent);

- user2478466

---

请检查您的JavaScript控制台是否有错误。我认为这个$block应该不起作用。请使用$("#block").css(...)。 - x4rf41

尝试使用这个：http://jsfiddle.net/njs2p/ - Joe

你是对的！$block 是之前尝试中留下的。即使使用 $("#block").css，它仍然无法工作。 - user2478466

http://jsfiddle.net/njs2p/1/ - user2478466

请检查我的答案更新并查看是否有效！ - Dylan N

Answer 1

编辑：

嗨，我拿到了你最新的jsFiddle，并做了一些更改，现在它可以将其转换为原始高度的一半。看看这是否是你需要的。

抱歉，我的代码没有保存。这是我的jsFiddle更新：

我添加了parseInt（）来确保您从.height（）接收的高度结果是一个整数，可以在您的除法中解析，以及用一个匿名函数包装 $（document）和$（window）的内部部分，调用cent（）;。

function cent() {
    var $block = $("#block"),
        margintop = parseInt($block.height() / -2);
    console.log('called');
    $('#block').css("margin-top", margintop);
};

// $(document).noConflict();
$(document).ready(function(){
    cent();
});
$(window).resize(function(){
    cent();
});

更改

$block.css("margin-top", margintop);

到

$('#block').css("margin-top", margintop);

- Dylan N

---

有一个冲突问题。我在下面详细说明了。你有什么想法吗？ - user2478466

Answer 2

有几件事情，

你在哪里定义变量$block？你需要将要修改的元素放入该变量中...

   var $block = $('#block'); 

在定义块高度之前，在您的cent函数中进行操作。

其次，

文档准备好后，需要调用您的cent函数。

 $(document).ready(function(){
    cent();
 });

与resize相同...所以总体代码应该如下所示。

$(document).ready(function(){
   cent();
   $(window).resize(function(){
      cent();
   });
});

如果您不清楚文档就绪的工作原理，我建议阅读jQuery API，它非常有用且用户友好。

- Lee Cooper

Answer 3

更改：

$block.css("margin-top", margintop);

To:

$('#block').css("margin-top", margintop);

同时也更改函数调用方法：

    $(document).noConflict();

    //on DOM ready
    $(document).ready(function ()  {
       cent();
    });

    //on window resize
    $(window).resize(function ()  {
       cent();
    });

- zur4ik

Answer 4

我使用了Dylan N的代码，在jsfiddle上一切正常，但在我的完整页面中出现了某种冲突。我已经将其缩小到以下代码。有人知道可能是什么冲突吗？

var $j = jQuery.noConflict();
jQuery(function ($j) {

var image_slides = [];

image_slides.push({
    image: 'img/background.jpg'
})


$j.supersized({



    // Individual links for each slide (Options: false, 'num', 'name', 'blank')

    min_width: 0,
    min_height: 0,
    vertical_center: 1,
    horizontal_center: 1,
    fit_always: 0,
    fit_portrait: 1,
    fit_landscape: 0,
    slides: image_slides,
});
});

- user2478466

---

这是完全不同的问题，应该作为另一个问题而不是对您之前问题的回答。但是，请尝试将var $j更改为var j并使用$(j).supersized。 - Dylan N

Answer 5

看起来你的语法有点问题。将$block更改为$('#block')。

这个jsFiddle应该能帮助你解决问题。

- David Ziemann

Answer 6

您需要设置前往哪个单位。.height()将返回一个数字，而css属性margin-top需要知道哪个单位。

var margintop = (blockheight / -2) + 'px';

- Alex