代码之家 › 专栏 › 技术社区 › user756659

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

javascript

user756659 · 技术社区 · 10 年前

尝试执行一些逻辑以确保工具提示显示在可视区域内。我如何使用我的 flot_position 我的变量 .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);
}

2 回复 | 直到 10 年前

Community kfsone 7 年前

您有两个选项:

致电 css(propertyName, propertyValue) Amit在中显示的版本 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);

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

Amit Joki 10 年前

您可以这样做:

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前