代码之家 › 专栏 › 技术社区 › John V

代码使用CSS,但不使用JS中定义的样式

html javascript

-2

John V · 技术社区 · 6 年前

在我使用的一个示例中,定义了以下内容:

div.tooltip {   
    position: absolute;         
    text-align: center;         
    width: 60px;                    
    height: 28px;                   
    padding: 2px;               
    font: 12px sans-serif;      
    background: lightsteelblue; 
    border: 0px;        
    border-radius: 8px;         
    pointer-events: none;           
}

因为我只能使用JS,所以我尝试在代码中定义它并删除HTML,如下所示:

var div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
.style("opacity", 50, "position","absolute","width","28px","height","28px","background","lightsteelblue","font", "12px sans-serif","text-align","center","pointer-events","none","border-radius","0px");

但是现在下面的代码停止工作了,我不知道为什么。

.on("mouseover", function(d) {      
            div.transition()        
                .duration(200)      
                .style("opacity", .9);      
            div .html(d.date + "<br/>"  + d.close)  
                .style("right", (d3.event.pageX) + "px")        
                .style("down", (d3.event.pageY - 28) + "px");   
            })

2 回复 | 直到 6 年前

hossein sedighian 6 年前

用这个

  .attr("style", " position: absolute; ... pointer-events: none;")

AnonymousSB 6 年前

d3.style不支持您正在尝试的语法。试试这个:

var div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style({   
        "position": "absolute",      
        "text-align": "center",       
        "width": "60px",
        "height": "28px",
        "padding": "2px",
        "font": "12px sans-serif",
        "background": "lightsteelblue",
        "border": "0px",
        "border-radius": "8px",
        "pointer-events": "none"
    });

推荐文章

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

1 年前