更新

Question

我想制作一个img可见，但不能使用标签但Javascript。我怎么能以某种方式使功能工作？

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>PingPongKép</title>
    <link rel="stylesheet" href="CSS/style.css">
  </head>
<body> 
 <script>
     function ilonaKep(){
       var ilona = document.createElement ("IMG");
       x.setAttribute ("src", "img/ilona.jpg");
     }     
    </script>
    <p>Let's See the image</p>
    <script>
      ilonaKep();
    </script>
   </p>
</body>
</html>

Answer 1

您需要将图像附加到DOM：

 function ilonaKep(){
   var x = document.createElement ("IMG");
   x.setAttribute ("src", "img/ilona.jpg");
   document.body.appendChild(x);
 }

虽然我们正在使用它，但你可以使用ImageElement构造函数来完成它：

function ilonaKep() {
  var img = new Image();
  img.src = 'img/ilona.jpg';
  document.body.appendChild(img);
}

Answer 2

更新

OP需要一种方式来设置图像样式。请参阅演示3

<小时/> 功能缺失：

放置img的目标元素
- 在布局
- 参考目标：var frame = document.querySelector('.frame');
创建元素后，必须将其添加到DOM中
- frame.appendChild(ilona);

参见演示1

以编程方式向DOM添加图像的另一种方法是使用一个方法或属性，该方法或属性接受给定的字符串并将其解析为HTML innerHTML或insertAdjacentHTML()。 演示2 使用insertAdjacentHTML()和Template Literal。

演示1

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>PingPongKép</title>

</head>

<body>

  <figure class='frame'>
    <figcaption>Image 1</figcaption>
  </figure>




  <script>
    function ilonaKep() {
      var frame = document.querySelector('.frame');
      var ilona = document.createElement("IMG");
      ilona.src = "http://p1.vatera.hu/photos/52/52/b859_4_big.jpg?v2";
      ilona.width = "300";
      frame.appendChild(ilona);
    }

    ilonaKep()
  </script>
</body>

</html>

演示2

// Reference the target element
var frame = document.getElementsByClassName('frame')[0];

// Efficient use of a string. Ref: Template Literal
var string = `<img src="http://www.nemzetisport.hu/data/cikk/2/12/81/9/cikk_2128109/ping2.jpg">`;

/* insertAdjacentHTML() will parse a string into HTML
|| and insert it in/out/before/after/as the first/last
|| child of the target element. Ref: insertAdjacentHTML()
*/
frame.insertAdjacentHTML('beforeend', string);

<figure class='frame'>
  <figcaption>Image 2</figcaption>

</figure>

演示3

// Reference the target element
var frame = document.getElementsByClassName('frame')[0];

// Efficient use of a string. Ref: Template Literal
var string = `<img src="http://www.nemzetisport.hu/data/cikk/2/12/81/9/cikk_2128109/ping2.jpg">`;

/* insertAdjacentHTML() will parse a string into
|| HTML and insert it in/out/before/after/as the
|| first/last child of the target element. Ref:
|| insertAdjacentHTML()
*/
frame.insertAdjacentHTML('beforeend', string);


/*~~~~~~~~~~~~~~[Styling]~~~~~~~~~~~~~~~~~*/

/* Get reference to target by Document Image 
|| Collection. The following statement will
|| retrieve the first <img> on the page
*/

var img = document.images[0];

/*A. Inline Style Attribute
    /| Signature
    \| obj.style.propertyName = 'value';
    ====================================
    This is not rcommended yet it's the most
    direct and simple way to style a node
    */

img.style.border = '3px dashed red';

/*B. By CSS Selector
    /| Direct Selectors
    || #id, tagName, [attribute], or .class
    == ====================================
    || Indirect Combinators or Inheritance
    || descendant [space] or >
    || sibling ~ or +
    This is the perfered way in particular, the
    .class selector is universally recommended
    
   */
/* classList method allows us to manipulate
    || an element's classes. Add the class to the
    || <style> block or stylesheet (style.css)
    */

img.classList.add('enlarge');

/*C. By modifying the stylesheet CSS.
    /| Signature
    \| var css = document.styleSheets[0].rules[0].style;
    |/ css.setProperty('property', 'value');
    ===========================================
    To target the first stylesheet snd its first rule
    ===
    This is a very uncommon procedure and its 
    complexity far outweighs its usefulness. Also,
    this won't work here because this stack is sandboxed 
    like a beach. This example is disabled so it doesn't 
    disrupt the other working examples.
    

var css = document.stylesheets[0].rules[0].style
cs.setProperty('transform', 'scale(.5,.5)');
*/

.enlarge {
  transform: scale(1.2, 1.2)
}

<figure class='frame'>
  <figcaption>Image 2</figcaption>

</figure>

如何使用Javascript将图像插入HTML

2 个答案:

更新

演示1

演示2

演示3