请在完整页面中查看代码片段的结果
我正在尝试从一组嵌套的HTML元素中获取文本内容,这些元素显然是在脚本/ API 运行时添加的。
请注意,
quote_text
和children[j]
是元素附加在 通过API /脚本运行时。因此,它不是我直接控制的。 (我使用 inspect元素找到了它们),所以我正在尝试更改 他们使用javascript,因为它们不在我的控制范围内。
但是,碰巧即使负责添加样式报价的脚本/ API在其中包含了内容,当尝试使用以下命令将其内容设置为另一个div时,它仍显示为空白脚本
为什么会这样?我该如何实现呢?
我这样做的原因是,我不希望API给出格式格式。而是我希望以自己的方式设置样式。
html,
body {
margin: 0;
padding: 0;
/*height:100%;
overflow:hidden;*/
overflow: hidden;
}
header {
background-color: black;
height: 100vh;
background-size: cover;
background-position: center;
}
/******* QUOTE *********************************************************/
.center_bottom {
position: absolute;
right: 10px;
bottom: -20px;
}
a {
pointer-events: none;
cursor: default;
}
.quote_div2 {
display: block;
color: white;
font-size: 20px;
font-family: Arial;
position: absolute;
left: 10px;
top: 15px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="1.css">
<script type="text/javascript" src="https://theysaidso.com/gadgets/v3/theysaidso.js"></script>
</head>
<body>
<header>
<!-- PART1 -->
<!-- DIV1: This below script fetches a Quote & displays it in styled fashion -->
<div id="quote_div" class="tso_simple_borders center_bottom q-t">
<script id="sc1">
TheySaidSo.render({
qod_category: 'inspire'
});
//document.getElementById("quote_div").style.display = "none";
</script>
</div>
<!-- PART2 -->
<!-- DIV2: This is division where i want to paste the plain text from DIV1-->
<div class="quote_div2">
<span id="spn"></span>
</div>
<!-- PART3 -->
<!-- In this script, I'm trying to fetch Quote contents and set it onto other div -->
<script>
var txt = "This text should be replaced by ONLY TEXT CONTENTS of below quote";
var qttxt = document.getElementsByClassName("quote_text");
Array.from(qttxt).forEach((el) => {
var children = el.childNodes;
if (el.nodeName.toLowerCase() == 'span') {
el.style.color = "white";
}
for (var j = 0; j < children.length; j++) {
if (children[j].nodeName.toLowerCase() == 'a') {
txt = txt + children[j].innerHTML;
}
}
});
document.getElementById("spn").innerHTML = txt;
</script>
</header>
</body>
</html>
**
对于那些对
quote_text
感到困惑的人,它附加在 后端(请检查下面的图片以供参考):
问题似乎出在脚本的执行顺序上。
为使其正常工作,PART1脚本应首先完成执行并 渲染报价框,然后执行PART3脚本。
但是似乎在PART1之前甚至执行完之前,PART3是 被执行! (这不应该发生)