当使用 JavaScript 获取 html 元素的外部 html 时。它没有获取背景图片属性

Question

我想在按钮单击事件上使用 Javascript 获取已定义 html 元素的外部 html。它输出得很好，但没有得到内联样式的 background-image 属性。

<!DOCTYPE html>
<html>
<body>
<div style="display: none;">
<div id="form" style="display: inline-block;background: rgb(221, 221, 221);background-image: url(https://www.w3schools.com/html/img_chania.jpg);">
    <form action="/action_page.php">
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname" value="John"><br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname" value="Doe"><br><br>
        <input type="submit" value="Submit">
      </form> 
</div>
</div>
<div id="test"></div>

<p id="testP"></p>

<p>Click the button to alert the outer HTML of the h1 element:</p>

<button onclick="myFunction()">Alert Header</button>

<script>
function myFunction() {
  var x = document.getElementById("form");
  var y = document.getElementById("test");
  var z = document.getElementById("testP");
  x.style.background="#ddd";
  y.innerHTML=x.outerHTML;
  z.innerText=x.outerHTML;

}
</script>

</body>
</html>

我想获得具有背景图像样式属性的外部 html。

Answer 1

正如您在下面的代码片段中看到的，我删除了替换 x 的 background 的行，因此它按预期工作。

如果你打算只去除y的背景，你需要找到y里面的元素（#form），并用#ddd替换它。

function myFunction() {
  var x = document.getElementById("form");
  var y = document.getElementById("test");
  var z = document.getElementById("testP");
  y.innerHTML=x.outerHTML;
  z.innerText=x.outerHTML;

}

<div id="form" style="display: inline-block;background: rgb(221, 221, 221);background-image: url(https://www.w3schools.com/html/img_chania.jpg);">
    <form action="/action_page.php">
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname" value="John"><br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname" value="Doe"><br><br>
        <input type="submit" value="Submit">
      </form> 
</div>
</div>
<div id="test"></div>

<p id="testP"></p>

<p>Click the button to alert the outer HTML of the h1 element:</p>

<button onclick="myFunction()">Alert Header</button>

当使用 JavaScript 获取 html 元素的外部 html 时。它没有获取背景图片属性

When getting outer html of an html element with JavaScript. It is not getting background image property

html

javascript

dom-events

当使用 JavaScript 获取 html 元素的外部 html 时。它没有获取背景图片 属性

When getting outer html of an html element with JavaScript. It is not getting background image property

html

javascript

dom-events

当使用 JavaScript 获取 html 元素的外部 html 时。它没有获取背景图片属性