JS中document.getElementById( id ).style.backgroundImage= url( 这里为啥不能

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS中document.getElementById( id ).style.backgroundImage= url( 这里为啥不能相关的知识,希望对你有一定的参考价值。

JS中document.getElementById("id").style.backgroundImage="url("这里为什么不能用相对路径与绝对路径")"
那里设置图片名称+扩展名就行,但是设置相对路径(img/123.jpg)就不行,绝对路径也不行,怎么回事啊~

参考技术A 不同于id那里, url的双引号是在url外面的,路径用括号括起来就可以了。可以参考下列地址的教程

参考资料:http://www.w3school.com.cn/css/pr_background-image.asp

本回答被提问者采纳
参考技术B "URL(img/123.jpg)";

使用 Charts.js 禁用动画

【中文标题】使用 Charts.js 禁用动画【英文标题】:Disable Animation with Charts.js 【发布时间】:2014-02-18 19:00:47 【问题描述】:

我在使用 chart.js 关闭动画时遇到了一些问题。

这是我的代码:

var pieData = [
    
        value: 30,
        color:"#F38630"
    ,
    
        value : 50,
        color : "#E0E4CC"
    ,
    
        value : 100,
        color : "#69D2E7"
        
];

var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData);

谁能举个例子?

【问题讨论】:

【参考方案1】:

根据文档 (https://www.chartjs.org/docs/latest/general/performance.html#disable-animations),这是完全禁用动画的方法:

new Chart(ctx, 
    type: 'line',
    data: data,
    options: 
        animation: 
            duration: 0 // general animation time
        ,
        hover: 
            animationDuration: 0 // duration of animations when hovering an item
        ,
        responsiveAnimationDuration: 0 // animation duration after a resize
    
);

【讨论】:

【参考方案2】:

这也可以全局完成:

Chart.defaults.global.animation.duration = 0

通过:https://www.chartjs.org/docs/latest/configuration/animations.html#animation-configuration

【讨论】:

【参考方案3】:

试试这个:

options: 
    animation: 
        duration: 0, // general animation time
    ,
    hover: 
        animationDuration: 0, // duration of animations when hovering an item
    ,
    responsiveAnimationDuration: 0, // animation duration after a resize

【讨论】:

【参考方案4】:

您好,以下 3 个选项可用于禁用动画

1)禁用动画:

var myLine = Chart.Line(ctx, 
        data: lineChartData,
        options: 
           animation: false,
         
        );

2)将动画持续时间缩短为 0

var myLine = Chart.Line(ctx, 
        data: lineChartData,
        options:    
            animation: 
                duration: 0,
            ,
         );

3)全局选项:

 Chart.defaults.global.animation = false;
    var myLine = Chart.Line(ctx, 
        data: lineChartData,
        options: 
         
       );

【讨论】:

【参考方案5】:
options
    animation: false

【讨论】:

【参考方案6】:

这应该可以解决问题:

    chartOption = 
        animation:
            duration: 0
        
    

【讨论】:

【参考方案7】:
var pieData = [
    value: 30,
    color: "#F38630"
, 

    value: 50,
    color: "#E0E4CC"
, 

    value: 100,
    color: "#69D2E7"
];

var pieOptions = 
    animation: false
;

var ctx = document.getElementById("canvas").getContext("2d");
var myPie = new Chart(ctx).Pie(pieData, pieOptions);

这应该工作;)

【讨论】:

options.animation 在文档中的哪个位置列出? chartjs.org/docs/latest/general/options.html 和 chartjs.org/docs/latest/configuration/animations.html 都没有提到布尔“animation”属性。 @Dai 不要将 4 年前的答案与当前文档进行比较。 但你的答案确实适用于当前版本的 ChartJS,这就是为什么我给你一个赞成票。【参考方案8】:
options: 
    animation: 
        duration: 0
    

【讨论】:

比未记录的 animation: false 技巧更清洁的方法 IMO。将duration 设置为0 Stills 允许在渲染完成后使用options.animation.onComplete() 回调在图表上进行自定义绘图。【参考方案9】:

为了防止阅读回答该特定示例的所有已接受答案,禁用图表 js 中的动画:

在初始化特定图表类型时在您的选项中传递一个对象并使用以下键/值对:animation: false。例如myChart.Bar(myCanvas, animation:false);

【讨论】:

以上是关于JS中document.getElementById( id ).style.backgroundImage= url( 这里为啥不能的主要内容,如果未能解决你的问题,请参考以下文章

JS基础--JavaScript实例集锦(初学)

JS---BOM---定时器

简单编写一个二维码

js中addEventListener第三个参数涉及到的事件捕获与冒泡

将多个变量从 JS 发送到 PHP

JS脚本如何实现DIV的移动