javascript - 更改视口(viewport)上的元素类型

Question

首先，我什至不确定这是否可能。当视口(viewport)低于 500 像素时，我试图更改元素的 HTML 元素类型。这样做的原因是因为我的元素有一个多页 PDF(而不是蜘蛛猴)。有问题的编码如下:

HTML

<title>Agony's Awesome Spot</title>
<link rel="icon" type="image/png" href="images/yay.png">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="small.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="medium.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="jquery-ui-1.8.23.custom.min.js"></script>
<script src="faqs.js"></script>
<h2>Feats and/or Strengths</h2>
    <div>
        <p>Here is my StackOverflow Profile:<br></br>
            <a href="http://stackoverflow.com/users/2886993/agony">
            <img src="http://stackoverflow.com/users/flair/2886993.png" width="208" height="58" alt="profile for Agony at Stack Overflow, Q&amp;A for professional and enthusiast programmers" title="profile for Agony at Stack Overflow, Q&amp;A for professional and enthusiast programmers"></a>
        <br></br>Get my resumé here:
        <br></br>
        <embed id="resume" height="900px" width="900px" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/007/cache/spider-monkey_719_600x450.jpg">
        </p>
    </div>

我试图链接到 <script>标签基于 media="only screen and (min-width:50px) and (max-width:500px)" ，但这没有用。基本上我想要发生的是当用户的视口(viewport)小于 500px 时，<embed>变成 <a>标签代替。我可以相应地更改 CSS 而不会出现问题，但我不确定如何完全更改元素标签。

我不确定如何获得 JSFiddle 来演示这一点，所以我发布了网站 here .

如有任何帮助，我们将不胜感激。

Answer 1

添加两个标签并操作它们的 display 属性

<a id="myAnchor" ...>...</a>
<embed id="resume" height="900px" width="900px" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/007/cache/spider-monkey_719_600x450.jpg">

和CSS:

#resume {
    display: none;
}

@media screen and(min-width: 500px) {
    #resume {
        display: block;
    }
    #myAnchor {
        display: none;
    }
}