的Javascript發送動態值到CSS

我使用jQuery和有麻煩懸停事件期間更新的飛行我的CSS值Im。基本上我想要在底部的那條小線按比例縮放到div的大小。的Javascript發送動態值到CSS

這裏是所討論的問題的代碼：

$('.menu li').hover(function() { 
    left = Math.round($(this).offset().left - $('.menu').offset().left); 
    //find the current width of the div 
    var width_flux = $('.menu #box .head').html($(this).find('img').width()); 
    //pass value to CSS 
    $('.menu #box .head').css('width', (parseInt(width_flux)) +'px'); 
    $('#box').stop(false, true).animate({left: left},{duration:500, easing: style}); 

    //if user click on the menu 
});

和相應的CSS

.menu #box .head { 
     background: url("http://whoisedward.com/img/bar.png"); 
     height:3px; 
     width:1px; 
     color:#eee; 

     /* force text display in one line */ 
     white-space:nowrap; 

     /* set the text position manually */ 
     padding-left:4px; 
     padding-top:3px; 
    }

來源

2012-09-28 Edward

首先，您可能希望將'hover'更改爲'mouseenter'，因爲懸停時懸停時拋出錯誤，因爲懸停會同時懸停和停用。 http://api.jquery.com/hover/和http://api.jquery.com/mouseenter/ – TheZ

'var width_flux = $（'。menu #box .head'）。find（'img'）。width （）'應該解決這個問題。現在它返回一個對象，而不是一個明確的整數。 – Ohgodwhy

有一個在線路問題

var width_flux = $('.menu #box .head').html($(this).find('img').width());

width_flux不是，但jQuery元素。

修改後的代碼：假設你想使用$(this).find('img').width()作爲width_flux

$('.menu li').hover(function() { 
    left = Math.round($(this).offset().left - $('.menu').offset().left); 
    //find the current width of the div 
    var width_flux = $(this).find('img').width(); 
    //pass value to CSS 
    $('.menu #box .head').width(width_flux); 
    $('#box').stop(false, true).animate({left: left},{duration:500, easing: style});  

    //if user click on the menu 
})

來源

2012-09-28 22:39:21 Anoop

我想，也許他想：'$（「菜單#box。頭IMG。」）寬（）;' – Shmiddty

我看，讓我怎麼改變它來獲取DIV大小或者乾脆找上的HTML元素的寬度。頁面並將其存儲在width_flux變量中？ – Edward

@愛德華你想用的寬度？ – Anoop

線

var width_flux = $('.menu #box .head').html($(this).find('img').width());

是錯誤的。您將寬度添加到元素，但元素（而不是寬度）被分配給width_flux。顯然，<element>px不是一個明智的CSS值。

嘗試：

width_flux = $(this).find('img').width(); 
$('.menu #box .head').html(width_flux); 
$('.menu #box .head').css('width', width_flux + 'px');

來源

2012-09-28 22:44:28 GolezTrol

你似乎值被設置爲你的HTML，而不是得到它

var width_flux = $('.menu #box .head').html($(this).find('img').width());

所以基本上width_flux將是一個元素..

而是嘗試

var width_flux = $(this).find('img').width(); 

    OR 

var width_flux = $('.menu #box .head').html($(this).find('img').width()); 

    var width_flux = width_flux.html() ; 
    // Then your code

確保您檢查錯誤條件

來源

2012-09-28 22:45:13

的Javascript發送動態值到CSS

回答

相關問題