通过JavaScript切换锚点和图像元素的属性_Javascript_Html_Css_Iframe

通过JavaScript切换锚点和图像元素的属性

javascript html css iframe

通过JavaScript切换锚点和图像元素的属性,javascript,html,css,iframe,Javascript,Html,Css,Iframe,我目前有一个包含两个元素的网页：图像（包装在锚中，在iframe中加载URL） iframe（默认情况下加载themes.html）单击图像，在themes.html和styles.html以及图像源之间切换iframe。然而，尽管我在网上读了很多教程和论坛帖子，我还是无法让它发挥作用单击时如何切换图像，以及如何在两个HTML文件之间切换iframe的源 <!DOCTYPE HTML> <html> <head> <title>M

我目前有一个包含两个元素的网页：

图像（包装在锚中，在iframe中加载URL）
iframe（默认情况下加载
```
themes.html
```
）

单击图像，在

themes.html

和

styles.html

以及图像源之间切换iframe。然而，尽管我在网上读了很多教程和论坛帖子，我还是无法让它发挥作用

单击时如何切换图像，以及如何在两个HTML文件之间切换iframe的源

<!DOCTYPE HTML>
<html>
<head>
    <title>Manager</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="assets/css/main.css" />
</head>

<body>

    <div class="switch">
        <a href="styles.html" target="switchframe" id="toggleURL" onclick="toggleURL();">
        <img src="images/segment-theme.png" id="toggleImage" onclick="toggleImage();"/></a>

        <iframe id="frame" name="switchframe" src="themes.html"></iframe>
    </div>

    <script>
        function toggleImage() {
            var img1 = "images/segment-theme.png";
            var img2 = "images/segment-style.png";
            var imgElement = document.getElementById('toggleImage');
            imgElement.src = (imgElement.src === img1)? img2 : img1;
        }

        function toggleURL() {
            var url1 = "themes.html"
            var url2 = "styles.html"
            var urlElement = document.getElementById('toggleURL');
            urlElement.href = (urlElement.href === url1)? url2 : url1;
        }
    </script>

</body>
</html>

我相信您遇到了问题，因为您使用的是

element.attribute

而不是

element.getAttribute（'attribute-name'）

因为image.src将返回绝对路径

www.domain.com/path/to/image.png

，其中getAttribute返回元素中指定的值

此外，您的案例只需要一个事件处理程序


经理
功能切换（e）{
e、 预防默认值（）；
var img1=“images/segment-theme.png”；
var img2=“images/segment style.png”；
var imgElement=document.getElementById（'toggleImage'）；
var src=imgElement.getAttribute（'src'）；
setAttribute（'src'，（src==img1）？img2:img1）
var url1=“themes.html”
var url2=“styles.html”
var urlement=document.getElementById（'toggleURL'）；
var href=urlement.getAttribute（'href'）；
document.getElementById（'frame'）.setAttribute（'src'，href）
urlement.setAttribute（'href'，（href===url1）？url2:url1）
}

我认为您遇到了问题，因为您使用的是

元素.attribute

而不是

元素.getAttribute（'attribute-name'）

因为image.src将返回绝对路径

www.domain.com/path/to/image.png

，其中getAttribute返回元素中指定的值

此外，您的案例只需要一个事件处理程序


经理
功能切换（e）{
e、 预防默认值（）；
var img1=“images/segment-theme.png”；
var img2=“images/segment style.png”；
var imgElement=document.getElementById（'toggleImage'）；
var src=imgElement.getAttribute（'src'）；
setAttribute（'src'，（src==img1）？img2:img1）
var url1=“themes.html”
var url2=“styles.html”
var urlement=document.getElementById（'toggleURL'）；
var href=urlement.getAttribute（'href'）；
document.getElementById（'frame'）.setAttribute（'src'，href）
urlement.setAttribute（'href'，（href===url1）？url2:url1）
}

function toggleURL() {
    var url1 = "themes.html"
    var url2 = "styles.html"
    var urlElement = document.getElementById('frame');
    urlElement.src = (urlElement.src === url1)? url2 : url1;
}