代码之家 › 专栏 › 技术社区 › 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 CDub 8 年前

您有两个选项:

致电 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);

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

3 月前

Alex · 在轻量级中同时解构和不解构变量

4 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

4 月前