Javascript 在jQuery.css（）调用中使用JS变量指定css属性的名称

尝试执行一些逻辑以确保工具提示显示在可视区域内。我如何在下面显示的

.css（）

中使用我的

flot\u位置

变量

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

//工具提示内容
函数显示工具提示（x、y、内容）{
var window_width=$（window.width（）；
如果（x>（窗口宽度-60））
{
var flot_位置='右'；
}
其他的
{
var flot_位置='左'；
}
$（''+内容+''）.css({
位置：'绝对'，
显示：“无”，
顶部：y+5，
flot_位置：x+15，//这不会将“left”或“right”设置为x+15
边框：“1px实心#333”，
填充：“4px”，
颜色：“#fff”，
“边界半径”：“3px”，
“背景色”：“333”，
不透明度：0.80
}).appendTo（“body”）.fadeIn（200）；
}

您可以执行以下操作：

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

$（''+内容+''）.css({
位置：'绝对'，
显示：“无”，
顶部：y+5，
边框：“1px实心#333”，
填充：“4px”，
颜色：“#fff”，
“边界半径”：“3px”，
“背景色”：“333”，
不透明度：0.80
}).css（flot_位置，x+15）//使用链接并使用.css（键，值）重载
.appendTo（“body”）.fadeIn（200）；

您可以执行以下操作：

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

$（''+内容+''）.css({
位置：'绝对'，
显示：“无”，
顶部：y+5，
边框：“1px实心#333”，
填充：“4px”，
颜色：“#fff”，
“边界半径”：“3px”，
“背景色”：“333”，
不透明度：0.80
}).css（flot_位置，x+15）//使用链接并使用.css（键，值）重载
.appendTo（“body”）.fadeIn（200）；

您有两个选择：

调用

css（propertyName，propertyValue）

版本，如中的Amit所示

$（''+内容+''）.css({
位置：'绝对'，
显示：“无”，
顶部：y+5，
边框：“1px实心#333”，
填充：“4px”，
颜色：“#fff”，
“边界半径”：“3px”，
“背景色”：“333”，
不透明度：0.80
}).css（浮动位置，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);

var cssOptions={
位置：'绝对'，
显示：“无”，
顶部：y+5，
边框：“1px实心#333”，
填充：“4px”，
颜色：“#fff”，
“边界半径”：“3px”，
“背景色”：“333”，
不透明度：0.80
};
cssOptions[flot_位置]=x+15；
$（''+内容+''）.css（cssOptions）.appendTo（“body”）.fadeIn（200）；

第二个选项之所以有效，是因为尽管在对象初始值设定项中不能在属性初始值设定项的左侧使用变量名，但可以在初始值设定项后使用带括号的变量名来添加属性。在JavaScript中，您可以使用点符号和文字属性名（

obj.foo

）以及括号符号和字符串属性名（

obj[“foo”]

）访问（获取/设置）对象上的属性。在括号表示法中，字符串可以是任何表达式的结果，包括变量查找。

您有两个选项：

调用

css（propertyName，propertyValue）

版本，如中的Amit所示

$（''+内容+''）.css({
位置：'绝对'，
显示：“无”，
顶部：y+5，
边框：“1px实心#333”，
填充：“4px”，
颜色：“#fff”，
“边界半径”：“3px”，
“背景色”：“333”，
不透明度：0.80
}).css（浮动位置，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);

var cssOptions={
位置：'绝对'，
显示：“无”，
顶部：y+5，
边框：“1px实心#333”，
填充：“4px”，
颜色：“#fff”，
“边界半径”：“3px”，
“背景色”：“333”，
不透明度：0.80
};
cssOptions[flot_位置]=x+15；
$（''+内容+''）.css（cssOptions）.appendTo（“body”）.fadeIn（200）；

---

第二个选项之所以有效，是因为尽管在对象初始值设定项中不能在属性初始值设定项的左侧使用变量名，但可以在初始值设定项后使用带括号的变量名来添加属性。在JavaScript中，您可以使用点符号和文字属性名（

obj.foo

）以及括号符号和字符串属性名（

obj[“foo”]

）访问（获取/设置）对象上的属性。在括号内的表示法中，字符串可以是任何表达式的结果，包括变量查找。

@DavidThomas:它不会像写的那样工作，它添加了一个名为

flot\u position

的属性，而不是名为

left

或

right

的属性。错误是工具提示没有放在正确的地方。@DavidThomas加上t.J的评论，它将导致无效的css。…@t.J.Crowder：出于某种让我感到惊讶的原因，尽管读了你的答案，我认为这是我曾经遇到过的问题。谢谢@大卫托马斯：它不会像写的那样工作，它添加了一个名为

flot\u position

的属性，而不是名为

left

或

right

的属性。错误是工具提示没有放在正确的地方。@DavidThomas加上t.J的评论，它将导致无效的css。…@t.J.Crowder：出于某种让我感到惊讶的原因，尽管读了你的答案，我认为这是我曾经遇到过的问题。谢谢