作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这是关于 HTML <object>
元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>parent</title>
<style>
#square { width:20px; height:20px; background-color: aqua;}
</style>
</head>
<body>
<div id="square"></div>
<object data="child.html" type="text/html" ></object>
</body>
</html>
和child.html是:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<button>red</button>
<button>blue</button>
<script>
document.querySelectorAll('button').forEach(bt=>{
bt.onclick=e=>{
console.log(e.target.textContent)
document.parentNode.getElementById('square').style.background = e.target.textContent
}
})
</script>
</body>
</html>
但是我得到了这个错误:
TypeError: document.parentNode is null
那么如何在 JS 中访问 child.html 中的#square 元素?
最佳答案
试试这个 -
parent.document.getElementById('square').style.background = e.target.textContent
关于javascript - 如何从javascript中的html对象访问父文档?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57497995/
我是一名优秀的程序员,十分优秀!