使用Dojo JavaScript动态更改div的背景图片
[英]Changing the background image of a div dynamically using dojo javascript
问题描述
我一直在寻找使用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进行处理的另一种方法。
谢谢您的帮助
2 个解决方案
解决方案1
1 2013-11-08 04:30:17
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>
解决方案2
0 2013-11-06 20:21:20
为了达到您想要的效果，我相信您自己的代码中的主要问题是您没有指定宽度和高度。 这些是设置背景图像尺寸所必需的。
我将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>
这样就达到了您要求的结果
使用javascript / jQuery在可折叠div中更改CSS背景图像
[英]changing css background image in collapsible div using javascript/jQuery
如何使用纯JavaScript动态更改div的背景图像
[英]How to dynamically change a background image of a div using pure javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.