1

我一直在寻找一种简单的方法来使用 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 的方法。

感谢您提前提供帮助

4

2 回答 2

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>

于 2013-11-08T04:30:17.987 回答
0

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

我将 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>

这达到了您要求的结果

于 2013-11-06T20:21:20.750 回答