Fatal编程技术网
  • javascript/
  • Javascript can'；不在图像上动态添加文本

Javascript can'；不在图像上动态添加文本

javascript html css

Javascript can'；不在图像上动态添加文本,javascript,html,css,Javascript,Html,Css,我正在使用HTML5+Javascript设计移动网页。我通过javascript动态添加了一个图像。但当我尝试在图像上动态设置文本时，它不起作用 我希望文本显示在图像上。 我的代码是 <script> for(var i=0;i<5;i++) { var ele = document.getElementById('container'); var table = document.createElement('table'); table.classNa

我正在使用HTML5+Javascript设计移动网页。我通过javascript动态添加了一个图像。但当我尝试在图像上动态设置文本时，它不起作用

我希望文本显示在图像上。 我的代码是

  <script>
  for(var i=0;i<5;i++) {
  var ele = document.getElementById('container');
  var table = document.createElement('table');
  table.className = 'c1';
  var tr = document.createElement('tr');
  var td = document.createElement('td');
  /* image added dynamically */
  var img = new Image();
  img.src = "Images/car.jpeg";
  img.className = 'c3';
  var txt = document.createTextNode('IE8');

  td.appendChild(img);
  img.appendChild(txt);
  tr.appendChild(td);
  table.appendChild(tr);
  ele.appendChild(table);
  }

  <style> .img{height:50px;width:50px;}
  .c1 {height:60px; width:100px;} 
  </style>
  <body id='container'></body>



对于（var i=0；i更好的选择是将图像设置为文本容器的CSS
image background
属性


<td style="background-image: url('path_to_image');">







一种不太好的技术是将文本放在一个浮动的容器上，其绝对位置（这需要JS）和z索引大于图像元素。
更好的选择是将图像设置为文本容器的CSS
图像背景属性


<td style="background-image: url('path_to_image');">







一种不太好的技术是将文本放在一个浮动的容器上，其绝对位置（这需要JS）和z-index大于图像元素。
尝试一下@Edorka建议的方法

td.backgroundImage=“url（'Images/car.jpeg'）”


不要创建img元素。
按照@Edorka的建议尝试此操作

td.backgroundImage=“url（'Images/car.jpeg'）”

不要创建img元素