在jQuery.css（）調用中使用JS變量指定CSS屬性的名稱

試圖做一些邏輯來確保工具提示在可視區域內顯示。如何在我的.css()中使用我的flot_position變量？在jQuery.css（）調用中使用JS變量指定CSS屬性的名稱

//tooltip stuff 
function showTooltip(x, y, contents) { 

    var window_width = $(window).width(); 
    if(x > (window_width - 60)) 
    { 
     var flot_position = 'right'; 
    } 
    else 
    { 
     var flot_position = 'left'; 
    } 


    $('<div id="tooltip">' + contents + '</div>').css({ 
      position: 'absolute', 
      display: 'none', 
      top: y + 5, 
      flot_position: x + 15, // This doesn't set 'left' or 'right' to x+15 
      border: '1px solid #333', 
      padding: '4px', 
      color: '#fff', 
      'border-radius': '3px', 
      'background-color': '#333', 
      opacity: 0.80 
     }).appendTo("body").fadeIn(200); 
}

來源

2014-07-13 user756659

@DavidThomas：它不會像寫入那樣工作，它會添加一個名爲'flot_position'的屬性，而不是名爲'left'或'right'的屬性。錯誤將是工具提示不會在正確的地方結束。 –

@DavidThomas添加T.J的評論，它會導致無效的CSS .. –

@ T.J.Crowder：出於某種原因，我驚訝，雖然已經閱讀你的答案，我認爲這是我曾經遇到的問題，曾經。謝謝！ –

你有兩個選擇：

調用css(propertyName, propertyValue)版本中his answer所示阿米特。

$('<div id="tooltip">' + contents + '</div>').css({ 
    position: 'absolute', 
    display: 'none', 
    top: y + 5, 
    border: '1px solid #333', 
    padding: '4px', 
    color: '#fff', 
    'border-radius': '3px', 
    'background-color': '#333', 
    opacity: 0.80 
}).css(flot_position, x + 15) 
.appendTo("body").fadeIn(200);

創建選項對象提前，然後添加到它，並使用它：

var cssOptions = { 
    position: 'absolute', 
    display: 'none', 
    top: y + 5, 
    border: '1px solid #333', 
    padding: '4px', 
    color: '#fff', 
    'border-radius': '3px', 
    'background-color': '#333', 
    opacity: 0.80 
}; 
cssOptions[flot_position] = x + 15; 
$('<div id="tooltip">' + contents + '</div>').css(cssOptions).appendTo("body").fadeIn(200);

第二個選擇的作品，因爲雖然你不能在使用一個變量名對象初始值設定項左邊的屬性初始值設定項，可以在初始值設定項之後使用帶括號符號的變量名來添加屬性。在JavaScript中，您可以使用虛線符號和文字屬性名稱（obj.foo）以及括號表示法和字符串屬性名稱（obj["foo"]）訪問（獲取/設置）對象的屬性。在括號內表示法中，字符串可以是任何表達式的結果，包括變量查找。

來源

2014-07-13 10:03:38

你可以這樣做：

$('<div id="tooltip">' + contents + '</div>').css({ 
    position: 'absolute', 
    display: 'none', 
    top: y + 5, 
    border: '1px solid #333', 
    padding: '4px', 
    color: '#fff', 
    'border-radius': '3px', 
    'background-color': '#333', 
    opacity: 0.80 
}).css(flot_position, x + 15) // use chaining and use .css(key,value) overload 
.appendTo("body").fadeIn(200);

來源

2014-07-13 09:59:55

在jQuery.css（）調用中使用JS變量指定CSS屬性的名稱

回答

相關問題