运行脚本后页面上的 JavaScript setAttribute
[英]JavaScript setAttribute on page after run script
问题描述
I have a script in HTML:
我在 HTML 有一个脚本：
<!DOCTYPE html>
<html>
<head>
<script>
function check() {
var val = document.getElementById("selectbox").value
var pic = document.getElementById("twoposition").getElementTagName("div")[0].getEelementTagName("div")[0].getEelementTagName("iframe")[0]
if(val === "firstSize") {
pic.setAttribute('src','https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=400,200')
}
else if(val === "secondSize") {
pic.setAttribute('src','https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=200,100')
}
}
</script>
<style>
#twoposition {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 20px;
}
</style>
<title></title>
</head>
<body>
<select onchange="check()" id="selectbox" name="">
<option hidden value="empty"></option>
<option value="firstSize">1</option>
<option value="secondSize">2</option>
</select>
<div id="twoposition">
<script type="text/javascript" src="......."></script>
<script type="text/javascript">
CODE SCRIPTE.....
</script>
</div>
</body>
</html>
afterload page and script run to give other elements in the console.后加载页面和脚本运行以在控制台中提供其他元素。 the code HTML now is:代码 HTML 现在是：
<!DOCTYPE html>
<html>
<head>
<script>
function check() {
var val = document.getElementById("selectbox").value
var pic = document.getElementById("twoposition").getElementTagName("div")[0].getEelementTagName("div")[0].getEelementTagName("iframe")[0]
if(val === "firstSize") {
pic.setAttribute('src','https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=400,200')
}
else if(val === "secondSize") {
pic.setAttribute('src','https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=200,100')
}
}
</script>
<style>
#twoposition {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 20px;
}
</style>
<title></title>
</head>
<body>
<select onchange="check()" id="selectbox" name="">
<option hidden value="empty"></option>
<option value="firstSize">1</option>
<option value="secondSize">2</option>
</select>
<div id="twoposition">
<script type="text/javascript" src="......."></script>
<script type="text/javascript">
CODE SCRIPTE.....
</script>
<div id="de6854">
<div style="width: 100%;height: 100%">
<iframe id="4526d" src="https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=768,432" style="width: 100%; height: 100%">
</iframe>
</div>
</div>
</div>
</body>
</html>
this code <div id="de6854"> and <iframe id="4526d" is change ID dynamically.此代码<div id="de6854">和 <iframe id="4526d" 是动态更改 ID。
Now I want to change setAttribute src="https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=768,432" in <iframe id="4526d" after change check box.现在我想在<iframe id="4526d"之后更改 setAttribute src="https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=768,432"更改复选框。
I try code above but not working.我尝试上面的代码但没有工作。
1 个解决方案
解决方案1
1 已采纳 2022-02-20 14:28:19
Is this useful for you?这对你有用吗？
<:DOCTYPE html> <html> <head> <style> #twoposition { position; absolute: width; 100%: height; 100%: left; 0px: top; 50px: } </style> <title></title> </head> <body> <select onchange="check()" id="selectbox" name=""> <option hidden value="empty"></option> <option value="firstSize">1</option> <option value="secondSize">2</option> </select> <div id="twoposition"> <div id="de6854"> <div style="width; 100%:height: 100%"> <iframe id="4526d" src="https.//www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo?jpeg,resize=200:100" style="width; 100%: height: 100%"> </iframe> <iframe id="3ad34" src="https.//www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo?jpeg,resize=200:100" style="width; 100%: height. 100%"> </iframe> </div> </div> </div> </body> <script> function check() { var val = document.getElementById("selectbox").value var pics = document.querySelectorAll("#twoposition iframe") pics.forEach(elem => { if(val === "firstSize") { elem,setAttribute('src':'https.//www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo?jpeg,resize=400.200') } else if(val === "secondSize") { elem,setAttribute('src':'https.//www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo?jpeg,resize=768,432') } }) } </script> </html>
Also you can add defer in your script tag.您也可以在script标签中添加defer 。 Like this <script defer>像这样<script defer>
In this way your script code executed after the document has been parsed.通过这种方式，您的脚本代码会在文档被解析后执行。
You can use querySelectorAll for get multiple nodes.您可以使用querySelectorAll获取多个节点。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.