Question

我一直在寻找一种使用dojo更改div背景图像的简单方法。我确信这很简单，但我一直无法找到正确的方法。

var chartDiv = dojo.byId('idChart');
dojo.setStyle(chartDiv, 'background-image', url('http://static2.grsites.com/archive/textures/yello/yello001.jpg'));

<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.2/dojo/resources/dojo.css" rel="stylesheet" />
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.2/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true"></script>

<body class="claro">
  <div id="idChart">
    <div style="float: left">
      <h3 style="color:DarkSlateGray;">Readmission Risk: <span id='idEstimatedRisk'>    </span></h3>
    </div>
  </div>

以这种方式使用它不会改变页面上的任何内容，我也无法使用dojo找到另一种方法。

先谢谢你的帮助

Answer 1

 var chartDivNode = dojo.byId('idChart');
 dojo.setStyle(chartDivNode, 'backgroundImage', 'url(http://static2.grsites.com/archive/textures/yello/yello001.jpg)');

<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.2/dojo/resources/dojo.css" rel="stylesheet" />
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.2/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true"></script>

<body class="claro">
  <div id="idChart" style="width: 100px; height: 100px;">
    <div style="float: left">
      <h3 style="color:DarkSlateGray;">Readmission Risk: <span id='idEstimatedRisk'>100</span></h3>
    </div>
  </div>

Answer 2

为了达到你想要的效果，我相信你自己的代码中的主要问题是你没有指定宽度和高度。这些是设置背景图像大小所必需的。

我将HTML定义如下：

require(["dojo/parser", "dojo/query", "dojo/dom-style", "dojo/ready"],
  function(parser, query, domStyle, ready) {
    ready(function() {
      var myNode = query("#idChart")[0];
      domStyle.set(myNode,
        "background-image",
        "url(http://static2.grsites.com/archive/textures/yello/yello001.jpg)");
    });
  }
);

<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.2/dojo/resources/dojo.css" rel="stylesheet" />
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.2/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true"></script>

<body class="claro">
  <div id="idChart" style="width: 100px; height: 100px;">
    <div style="float: left">
      <h3 style="color:DarkSlateGray;">Readmission Risk: <span id='idEstimatedRisk'>100</span></h3>
    </div>
  </div>

这实现了您要求的结果

使用dojo javascript动态更改div的背景图像

2 个答案: