使用jQuery . CSS()调用中的JS变量来指定CSS属性的名称

use JS variable inside jQuery .css() call to specify the name of CSS property

本文关键字：CSS 属性 变量 JS 调用 使用 jQuery      更新时间：2023-09-26

尝试做一些逻辑来确保工具提示显示在可见区域内。如何在.css()中使用flot_position变量?

//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);
}

您有两个选择:

  1. 拨打Amit回答中显示的css(propertyName, propertyValue)版本

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

  2. 提前创建options对象，然后添加到它中，并使用它:

    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"])。在括号表示法中，字符串可以是任何表达式的结果，包括变量查找。

你可以这样做:

$('<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);
相关文章：